So you’re making a mobile version of a website and you get it perfectly laid out for iOS handhelds in portrait mode.
You’re using LiveView Screencaster to send your designs to you phone to see how they’ll look at actual size, in your hand.
You’re using these media queries to make stylesheets for portrait and landscape on iPhone/iPod and iPad.
@media screen and (orientation:landscape) {/*landscape mode*/}
@media screen and (device-width: 768px) {/*iPad*/}
@media screen and (device-width: 768px) and (orientation:landscape){
/*iPad, in landscape mode*/}
But you start to notice that your pixel perfect design gets scaled up every time you rotate the device to landscape. It zooms about 1.25x! The fix is in your meta tags, specifically the viewport one:
Some people will say, “why not just use ‘user-scalable=false’,” and the answer is that the user isn’t the only thing scaling the viewport. The rotation event does it too. That’s what we’re trying to prevent.
Much appreciated for the information and share!
Very good. I found this was the behavior I preferred to see in my current project.
As you mentioned, this is essentially the same as “user-scalable=no”, but behaves a little nicer when the device is rotated, i.e. the way I would expect it to.