Fixing the iPhone horizontal orientation zoom

Question

My issue is the zoom that occurs when changing the orientation of an iPhone from portrait to landscape. I see this is a pretty well known issue, and there seems to be plenty of documentation on it, but so far, none of the solutions are working for me.

This is my code..

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

I'm still getting the zoom issue with this, even though I've seen people post this code as a solution to the problem, and they seem to be getting the desired results, I'm not.

My goal here is to disable zoom, have it scaled at 1.0, and of course, prevent the zoom that occurs when changing orientation.

I would like to avoid using javascript as well.

Answer 1

According to this site, the device-width is always the width in portrait. In other words, the device width will always be 320 on an iPhone.

In the meta tag that you posted, you would need to set the width=device-height to get the intended results in landscape.

While I haven't tackled this problem myself, according to that same link it looks like you will need to use media queries with the orientation.