Scale down Mobile Safari viewport width when iPad is in portrait orientation?-
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.
Answer
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