I am working on a website which is designed to work best when viewed in landscape mode on iPad. Everything is in a 1024px wide <div> container. However, I am still required to scale down the viewport so when the user turns the iPad into portrait orientation, the user does not have to zoom out or scroll horizontally to see everything on the page.
Currently I have this <meta> tag in my <head>:
<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />
Everything displays fine when the page is viewed in landscape mode, but I can't get the abovementioned required portrait behavior to work. I tried changing the initial-scale to 0.75, and the exact opposite happens: everything fits in portrait mode, but there's extra horizontal space when iPad is in landscape mode.
Is there any CSS, Javascript or special viewport setting I can use to get this to work?
P.S. I cannot use user-scalable=no.
You can even add the orientation properties within the same CSS that you use for desktop browsers...Just need to add the following;
@media only screen and (device-width:768px)and (orientation:portrait)
/*iPad Portrait orientation styles */
@media only screen and (device-width:768px)and (orientation:landscape)
/*iPad landscape orientation styles */
Again remember for iPad, device-width is always 768px irrespective of the orientation...I know it's confusing, but that's the way it is...
You can also check out a very good tutorial on the same at
http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
You may be able to use orientation specific CSS like this:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
In that case you will likely have to set the viewports setting to the devices max width and take care of the actual width of the content using CSS. For example, wrap everything in a div with the appropriate width for each orientation, 1024px or 768px (minus the status bar and browser chrome is neccessary).
<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />
