Mobile Viewport Orientations initial-scale=1.0

The content fits nicely on the iPad screen—from side to side—even though its pixel width is wider than 1024px. I don’t really understand why, though.

You must have something else going on there Ralph. This example is 1040px fixed width with no initial scale and it sticks out the side in portrait mode as expected. If you switch to landscape mode it still sticks out by just as much because the layout is zoomed and is miles out rather than a few odd pixels. What’s worse is then if you switch back to portrait the layout gets zoomed again in error.

This example with initial scale added shows portrait exactly the same as without initial scale but then switching to landscape it fits much better and is just a few pixels out. Switching once again back to portrait does not zoom the page again as with the previous example.

or do you prefer seeing the narrow portrait version blown up when in landscape? fine5.htm

No I don’t prefer that version because when I rotate the ipad I want the 1024px display and not 768px scaled up. I can get that in portrait view by just zooming anyway. :slight_smile:

I’ve done a series of tests this morning trying a number of combinations to see what the effects are between initial scale and not using initial scale and in every test not adding initial scale to 1 causes the layout to fail without exception. Indeed you will see that in one of the tests that media queries for 1024px are ignored by the ipad if initial scale is not set to 1!! It just uses the 768px media stylesheet.

Tests

test3.htm : 1024px max-with no initial scale
Portrait fits nicely
Landscape is 768px version just zoomed to ft the wider 1024px screen. Text is too large in landscape mode.

Result : Fail

test4.htm : As above but with initial scale set to 1
Portrait fits nicely
Landscape fits nicely with longer lines of text as expected

Text same size on both screens

Result : Pass

test5.htm : 1224px max-with no initial scale
Portrait fits nicely
Landscape is 768px version just zoomed to ft the wider 1024px screen. Text is too large in landscape mode.

Result : Fail

test6.htm : As above but with initial scale set to 1
Portrait fits nicely
Landscape fits nicely with longer lines of text as expected

Text same size on both screens

Result : Pass

test7.htm : Testing media query with body background colour . No initial scale
Portrait is red body background
Landscape is red body background but it should be blue. The media query for 1024px has not been activated!!

Result : Fail

test8.htm : As above but with initial scale set to 1
Portrait is Red body background
Landscape is Blue body background as expected

Result : Pass

test9.htm : 1024px fixed width no initial scale
Portrait stretches out of viewport as expected
Landscape also stretches out of viewport even though the layout is supposed to be the same size as the viewport. Text is too large in landscape mode.

An extra bug is triggered here if going back to portrait from landscape once again the layout is scaled yet again!!

Result : Fail

test10.htm : As above but with initial scale set to 1
Portrait the same as previous example of course and sticks out at the side.
Landscape fits exactly.

No bug triggered when going back to landscape.

Text same size on both screens

Result : Pass

Further Tests 11,12,13 and 14 use a max width of 1040px and a fixed width of 1040px just to test a wider view and the results are exactly the same as all the other tests and without initial scale all tests fail badly.

http://www.pmob.co.uk/mobile/ipad-test11.htm
http://www.pmob.co.uk/mobile/ipad-test12.htm
http://www.pmob.co.uk/mobile/ipad-test13.htm
http://www.pmob.co.uk/mobile/ipad-test14.htm

I can’t actually find a single test where not using initial scale of 1 is any benefit for a normal website.

The biggest issue I see is that you have media queries and a set of fixed width designs for 762px and 1024px then the 1024px media queries never get activated unless you have initial scale set to 1.

There indeed may be other triggers and variations but for me I will continue using the meta tag and setting initial scale to 1.

If anyone has examples of where omitting initial scale has benefits then I would like to see them and perhaps document them here to keep a record.