Mobile Viewport Orientations initial-scale=1.0

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).