iPad in landscape mode is scaling my site up - I don't know how to fix it

Question

My test page is at: http://dev.my-igloo.net/ps-rwd/

I'm trying to get my head around media queries and changing the site width according to the browser width - the site has to work on iPads and iPhones and at the moment I'm testing it on the iPad and going slightly insane.

Please bear in mind the site design/layout isn't complete at the moment as I'm just working with initial settings here before I delve into perfecting everything. I've set a different background colour for each stylesheet so that it's easy to see which one is loaded.

I have this in my head tag:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

and if I set my media queries like so:

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" />

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" />
<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" />
<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" />

When I test on the iPad in landscape mode the page loads the default stylesheet but is zoomed and I have to scroll left and right to see the whole layout or pinch-zoom to zoom out to get it to fit on the screen.

How can I avoid this? I thought that by having the initial-scale set to 1.0 would make it load without zooming in.

I then changed my media queries a bit to:

<!-- For Desktop Browsers -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 769px) and (max-width: 1024px)" />

<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px) and (orientation:portrait)" />
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 481px) and (max-width: 767px) and (orientation:landscape)" />

<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px) and (orientation:landscape)" />

and then on the iPad in landscape mode the 768 stylesheet was loaded and the page zoomed - I don't understand what I'm doing wrong.

I're read through this: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193 and not found a solution to this problem. Other options I've tried have been to include minimum-scale and maximum-scale but this takes out the pinch-zoom functionality which is not desirable.

I've reverted back to the initial set of media queries for now and hope someone can help me.

Answer 1

From what I understand, this seems to be more of an issue caused because of the way Safari calculates the device width. Basically Safari always takes the device width based on the portrait orientation. Thus when you say width=device-width, it always equals 768px irrespective of the orientation.

Thus what seems to be happenning is that in landscape mode, your 100% width is calculated as 768px, even though the available width is 1024px. (I am displaying a 768px page on a 1024px screen which results in stretching or zooming in).

The solution which can be thought of is giving a fixed viewport width.

<meta name="viewport" width="1024" />

This has a big downside of your viewport not scaling automatically according to the device it is viewed on. But if you really need both the things to happen, you'll probably need to consider some kind of dynamic server-side detection and having the different meta viewport code delivered to the browser based on the user-agent detection from the request.

Answer 2

After a morning of testing, I agree with the rest--flipping from landscape to portrait to landscape exposes a bug in Safari. The only way I've found to get around it is by using:

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

This keeps each orientation at it's proper scale. The only downside to this fix is you can't zoom-in. Not a good solution for sites with small text, or an older audience, but otherwise does the trick.

Additionally, there's a nice JS hack here: https://gist.github.com/901295 which allows zooming. However, once zoomed, if the orientation is changed the same old bug sets in.

Answer 3

Found a better solution. Works on ipad and iPhone both landscape and portrait.

<meta name="viewport" content="width=1062px, user-scaleable=yes" />

1062px can be anything ex: 800px or something bigger.