meta "viewport" doesn't act right

In the most recent HTML5BP the viewport is set like this in the header…

<meta name="viewport" content="width=device-width">

However, when viewed on an iPad2, horizontal/landscape mode a website that is designed for a responsive 960px grid scales up to what it might look like in 768px width instead, even though the iPad’s 1024px is more than enough to accommodate the 960px page.

Why did you change this from…

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

which shows the right layout in 1024 width, and also changes it to the right layout when rotated to portrait at 768 width?

Sorry if I’m not understanding, but everything is zoomed in landscape mode with the current default settings when it shouldn’t be. Graphics are blurry and this is triggering the wrong media query, one lower than it should be.

[Fatbat]

Thanks. Yes, additional documentation would be good. However, I feel the current behaviour, at least on the iPad2, isn’t desirable. Even though I’m viewing the screen in landscape with 1024px available to me, my site is zooming as if I were looking at it in portrait mode at 768px. But it’s not only zooming the text and other CSS elements on the page, it’s also blowing up graphics and as such they are blurry. It’s forcing the page to bump down one media query breakpoint when it doesn’t need to do so.

So we have the options already discussed:

    <meta name="viewport" content="width=device-width">

Which forces a 768px site into 1024px of space when in landscape mode artificially zooming all elements on the page. Portrait mode works as expected.

Or:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Which displays the site correctly in both landscape and portrait, displaying the right media query breakpoint for both. Although if you rotate from landscape to portrait the site gets clipped on the left the width of the scrollbar and requires a pinch to get it to center correctly. You can’t zoom in unfortunately.

Or:

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

Which displays the site correctly in both landscape and portrait, also displaying both media query breakpoints for both. Again, if you rotate from landscape to portrait the site gets clipped on the left and requires a pinch to center it. Rotating back from portrait to landscape, however, leaves the site zoomed way in and also requires a pinch to scale it down and recenter it (is this the bug that was previously discussed?).

Or:

Leave the viewport meta off completely and the site scales to fit the page in portrait and the media query breakpoint is not respected and does not trigger at all.

Are there any other options?

[necolas]

Fixed by ff37dba6bf025a00f58b2bb12f7c6a827e6643c5