Mobile Viewport Orientations initial-scale=1.0

HTML & CSS
1

http://sinfronteras.edu.mx/p7/fine5.htm

responsive website design testing on iPad portrait & landscape orientations with viewport width=device-width
portrait version shows perfectly what one would expect for 768px
landscape version (1024px) shows a mimic of the narrow portrait version and ignores the media query
effectively blowing up the content and disregarding the extra available horizontal space
is this really a default iOS behaviour? or an iOS bug?
most android tablets act perfectly well for both orientations
initial-scale=1.0 has been suggested by some but highly frowned upon by others
can we come to an agreement about this for the sake of our common mental health?

2 screenshots:
http://sinfronteras.edu.mx/p7/portrait.gif
http://sinfronteras.edu.mx/p7/landscape.gif

2

initial-scale=1.0 has been suggested by some but highly frowned upon by others

Who frowns upon it? Are you sure? It’s fair enough to frown on disabling user scaling altogether, but starting at 1.0 scale is perfectly reasonable. :-/

3

pasting 5 snippets of text from a conversation i had with an expert commercial programmer about initial-scale and iPad orientation:

There is no reason to use initial-scale. Just don’t use it.

iPads, in viewport mode, display 1024 pixels horizontally. Period. Unless you set initial-scale, in which case, things go out of whack when you change orientation.

The iPad is effectively 1024 pixels wide in both landscape and portrait mode when you design a responsive layout.

We do not use initial-scale. We do not recommend using initial scale. If you want to use initial-scale, then that is certainly your prerogative.

The initial-scale attribute should not be used as it screws up the display when changing orientation. Trust me, we’ve done enormous amounts of testing on this.

a second opinion is very welcome here, please leave your feedback.

4

What was his comment about your original issue, which initial-scale fixed?

5

If you don’t use initial scale then your media queries for portrait and landscape are useless because the device will just assume the page is 980px wide and shrink it to fit resulting in a zoomed layout in layout mode and not an optimised one as far as I can tell.

If you aren’t using media queries then you don’t need the actual meta tag at all anyway because you aren’t catering for smaller devices. Even if you create a fully fluid site the smaller device will just assume the page is 980px wide and shrink it until it fits in the viewport.

If you are using media queries then it is imperative that the meta tag is added with “width=device-width” or the mobile device (or tablet) will again assume the page is 980px wide and shrink it microscopically until it fits. The initial-scale=1.0 is to stop the text from being resized when changing from portrait to landscape as you can often tell because the line length contains the same number of words which means its just been zoomed (this seems to be the trigger for the zoomed layout on the old ios5) .

The problem you mention with the change to landscape was fixed in ios6 and my ipad shows no such problem with changing from portrait to landscape with your layout. Previous to ios6 the fix was to set initial scale to 1 but also set ‘maximum-scale=1.0’ or ‘user-scalable=no’. The problem with this approach is that as mentioned before it stops users from also pinching and zooming so was not the best option. There are some scripts about that fix this issue.

https://github.com/sergiolopes/ios-zoom-bug-fix

However, as I mentioned above this is no longer an issue in ios6 and 7 so is it really worth while to add it?

The initial-scale attribute should not be used as it screws up the display when changing orientation. Trust me, we’ve done enormous amounts of testing on this

Note that the html5 boilerplate created by the brightest minds in the industry use this:


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

Paul, first YES we are using media queries, however…
i am not sure if the bug that was fixed in ios6 is the same bug i am trying to highlight here
that layout you link to is from another post, the correct page is without initial-scale and was tested on ios7:
http://sinfronteras.edu.mx/p7/fine5.htm
where you can see it behaves as described and as shown in the screenshots.

When i added initial-scale=1.0 to that layout it displayed perfectly on ios7 in landscape
http://sinfronteras.edu.mx/p7/fine4.htm
i thought i had found a great fix, however, the responsive menu developer started to tell me NOT to use initial-scale=1.0 (go figure!)

Ralph, his comments about my “fix” are all above and he basically persuaded me to stop using initial-scale
and accept the blowing up or zooming in effect in landscape mode which he claims is the apple bug
i agree with Paul that many bright minds in the industry use initial-scale=1.0
but this guy is also very well versed in responsive layout and has no reason to lie
most importantly he also has many working examples online which do not use initial-scale:

http://www.projectseven.com/products/templates/pagepacks/dmm/affinity/layout-05.htm

so, where does that leave us?

7

I thought I knew what I was talking about but even I’m getting confused now :slight_smile: I have revised some of my comments above to reflect this. It seems there are two issues. Zoomed layout and zoomed text.

The bug is evident because you didn’t have the initial-scale=1.0 in place. Without it, it behaves like ios5 and just zooms the portrait view text in landscape mode.

When i added initial-scale=1.0 to that layout it displayed perfectly on ios7 in landscape
http://sinfronteras.edu.mx/p7/fine4.htm
i thought i had found a great fix, however, the responsive menu developer started to tell me NOT to use initial-scale=1.0 (go figure!)

Yes its a strange thing to say as the fix worked exactly as I thought it would.

I can’t really understand their stance on this (p7) and when I indeed look at that project seven page you linked to on the ipad I see that it has the same problem as your page in that the landscape view is a zoomed version of the portrait view. You can tell this because they both have exactly the same number of words per line except in landscape mode the text is enlarged. Initial scale would fix this.

The issue isn’t as clear cut as I thought and others have discussed other methods

http://blog.goetter.fr/post/32513655620/viewport-adieu-width-device-width
http://www.quirksmode.org/blog/archives/2013/10/initialscale1_m.html
https://github.com/h5bp/html5-boilerplate/issues/824

Project7 has been around for some time and so I withdraw my earlier comments about not trusting them but I don’t understand the logic behind the statement to remove the initial scale. As you can see from my demo of your page it works well in landscape and portrait. Their examples seem to be portrait versions of the ipad and the same version in landscape just a bit larger rather than a larger width page.

There may be something that I’m missing so I would like to see current examples of where initial scale fails or doesn’t do a good job. It’s only by threads like this that we can gather more information anyway and hopefully move forward.

I think I need to do some more testing after a good nights sleep:)

8

I recently helped turn a fixed-width site into a somewhat mobile friendly site, in that mobile styles kick in at a certain point via @media rules. It’s a bit of a mess doing this, but seems to work OK.

The site’s wrapper is 1040px in width. On tablets, the client wanted some left/right padding, and on tiny screens everything drops to a single column. It all worked really well just using

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

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.

If I add initial-scale=1, the layout is too wide on iPad—which I do understand, but I don’t want that, of course. So leaving off initial-scale does have its uses—even if because I’ve done something wrong!

9

Paul, you understand completely the issue at hand, thanks for getting your mind around it. lets see what people have to say. i spent the last few days trawling the web using various search terms, and nothing has come up about this. maybe the project7 attitude of not doing anything about it, and letting iOS act natively, is the best option? or as you very wisely asked, what would be the disadvantage of correcting the issue with what seems to be a VERY common attribute (initial-scale).

10

a simple sample test for iPad users,
in horizontal landscape mode please note the difference between these 2 pages:

http://sinfronteras.edu.mx/p7/fine4.htm

and

http://sinfronteras.edu.mx/p7/fine5.htm

one has the initial-scale=1.0 meta tag and the other has no initial-scale set (only width=device-width)
you will see that initial-scale=1.0 forces your iPad to use the full width of the device in landscape
do you as an iPad user prefer and expect that? fine4.htm
or do you prefer seeing the narrow portrait version blown up when in landscape? fine5.htm

11

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.

12

great work from Paul, thanks!
i see no reason to stop using the full 1024 pixels width when iPad is horizontal
but i am open to other opinions…
and the p7 expert continues to advise that there is NO REASON TO USE INITIAL SCALE

13

It would be helpful if the expert could say why rather than that ‘there is no reason’ as that is no real help to us. P7 has been around a long time and obviously have some great knowledge but unless your expert is willing to share the reasons why then we can only surmise that he doesn’t really know why and is perhaps repeating something that has been passed down.

I am willing to change my opinion as we are all still learning about best practices for mobile but I do need to know why I should my approach:)

I took a look at the main projectseven site (I won’t link to it but you can find it) and they don’t use initial scale in the main version but unlike the other p7 site you linked to they have additional rules for landscape only.

e.g.


@media only screen and (max-width: 768px) {
body { background:red }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
body { background:green }
}

In some cases they have rules for portrait and landscape and desktops whic means they are duplicating or even trebling the rules they need when if they had used initial scale the normal media queries would have applied. Indeed in further testing I can see that they are still caught by the zoom bug so in landscape they are adjusting to font-size to compensate for this resulting in a lot of extra unnecessary work.

More tests. :slight_smile:

Test15 : No initial scale but landscape orientation rules applied.


@media only screen and (max-width: 768px) {
body { background:red }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
body { background:green }
}

[B]

Results[/B]

Portrait mode as expected.
Landscape mode now shows the green background from the landscape rules which is great but the text is still enlarged so no gain in horizontal space unless you add further rules.

Score 5/10

Test 16 : Same as above with initial scale.

Portrait mode as expected
Landscape mode as expected and no zoomed text.

Pass

Test 17: With initial scale but no landscape settings


@media only screen and (max-width: 1024px) {
body { background:green }
}

@media only screen and (max-width: 768px) {
body { background:red }
}

Portrait mode as expected
Landscape mode as expected and no zoomed text and no need for extra landscape rules.

Pass

So far in every test I have done not using initial scale has failed in some way while using it has passed every time.

I think that perhaps the p7 site are working on historic data and using that technique to perhaps avoid the ios5 zooming bug. It would be nice though to have some concrete and evidence and examples of when leaving off initial scale is beneficial. I can only see that it creates much much more work to get right or leaves the site broken (as in your first p7 example).

14

final comments from project seven:

In order to use device unspecific media queries, a viewport meta tag is required. This is how we make our layouts. I would also like to emphasize that the absence of initial-scale most definitely does not cause an iPad to shrink a page based on a 980 pixel baseline. What triggers a mobile device to read non-device media queries is simply having the content=“width=device-width” attribute on the viewport meta tag. Only in its absence, will a mobile device “shrink to fit”.

do we understand that?

15

Yes , I mentioned that in one of the above posts and width=device-width is a must to enable media queries to work on mobile but the point P7 is missing is that without initial scale = 1 they cannot target landscape properly on the ipad as all they get is a zoomed version of portrait which is evident from the first link you posted from them.

As I mentioned in my last post on their normal site they have used orientation media queries to target landscape but they are still suffering from the zoom bug and then are also reducing font-size to compensate. All of which was unnecessary if they had used initial scale. :slight_smile:

They still have provided no proof or evidence or any advice to make any of the assumptions I have made be incorrect. There seems to be no benefits from the technique they are using but only downsides.

16

As a follow up to this there is a recent post on the quirksmode site about device width and initial scale and it can be seen from the table that the most reliable technique is to include device width and initial scale and then all but one of the tested devices did the same thing.

It’s by no means cut and dry but by sheer weight of opinion and examples (and with no examples to the contrary) I have to conclude that P7 are incorrect in their assumptions.

17

Thanks for the link, Paul. Jeesh, what a messy situation.

18

Yes its no surprise we mortals cannot get it right when its not built right.