#initial-scale

[developpement-facile-blog]

Comment utiliser la balise viewport pour le web mobile

Read more Téléchargez le code source complet sur : https://www.diigo.com/user/Matthieu20

[blackdaycreative]

Rudie Can't Scale

I love when I start looking at a site that's in production on the iPad. All of your Media Queries have kicked in and you're seeing the transformed li'l bastard optimized on a cozy-cute touch device.

Sometimes shit ain't right and while you often know right away what's up, other times you have to explore a bit. I noticed that changing orientation from portrait to landscape on the iPad did not produce the "1024" size as I had seen when all my screens were looking killer in Responsinator. I remembered recently finding a discussion or two about omitting initial-scale=1.0 from the viewport meta tag in modern times, which I had done, so I wondered if that was the issue.

This parameter sets the initial zoom level and it seems that changing the orientation on the iPad (and possibly other devices) triggers a default zoom, therefore precluding the correct display size. Ultimate result: it is needed.

This is what you want: <meta name="viewport"content="width=device-width, initial-scale=1.0">

Adding initial-scale=1.0 fixed the issue and moving from portrait to landscape (and back) beautifully produced the correct layouts for each.

As an aside, I'll also take this time to mention that you probably don't ever want to use user-scalable=no which basically prevents the user from zooming in and out. That's a shitty experience to force on the user (like playing some of the songs on London Calling).