onorientationchange=”updateOrientation();”
Where updateOrientation(); is the function that will run on orientation change.
Tag: ipad
Categories
IOS: Developing a website for the ipad
Some measurements to take into account:
Ipad’s portrait width: 768px
Default viewport with (if viewport not specified): 980px (meaning pages are zoom out until 980px of content are visible). Basically, when a page is displayed in IOS / Safari combination, the page is printed into a 980px canvas, and then that canvas is squeezed down to fit the viewport area, all this by default.
To avoid the 980px default, you usually do the following:
And then, with media queries, reduce the size of your site (if it exceeds 768px):
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
}
Alternatively, the things you can do to develop a website for the ipad:
1) design your site to be 980px wide or less, then it will look good without anything else needed, but small. It will also not zoom content out of the screen.
2) use metatags:
<meta name="viewport" content="width=device-width" />
This one supposedly matches the content to the available screen size (in portrait mode).
If you rotate at this point, the content is scaled up to fit the screen.
If your site does not exactly match the screen size of the ipad, you can specify the number
pixels to display as well:
<meta name="viewport" content="width=800" />
If all fails, you can always try to use media queries to do the job:
Note that when changing orientation back and forth, sometimes the content doesn’t get scaled back to the proper size, it doesn’t seem to be a definite solution for this:
http://stackoverflow.com/questions/2581957/iphone-safari-does-not-auto-scale-back-down-on-portrait-landscape-portrait
Here are some examples on how to adjust viewports
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (device-width: 768px) {
.socialIcons, a#fdbk_tab{
display: none;
}
}
Targeting only the ipad:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { }
If you are trying to target only landscape or portrait orientation, try the following:
and (orientation:landscape), like this:
@media only screen and (device-width: 768px) and (orientation:portrait){
/* Your rules here */
}
If you are using JS to further target orientation (portrait or landscape), you can try this:
if (window.orientation == -90 || window.orientation == 90) {
// document.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1.0";
total_width = 1024;
alert('Landscape' + window.orientation);
} else { // portrait mode
// document.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=0.7";
alert('Portrait' + window.orientation);}
A hacky way to test for the ipad / iphone in js is to check if orientation has been set:
if(typeof(window.orientation) != "undefined") { /* Stuff that will only run on iphone / ipad */ }