Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange
I am displaying different content depending on how the user is holding his/her phone using the onorientationchange call in the body tag. This works great - I hide one div while making the other visible.
The div in portrait mode looks great on first load. I use this to get the right scale/zoom:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
Even if the content in portrait mode run over, the width is correct and the user can scroll down. The display in landscape mode is perfect too. However, if content in landscape mode requires the user the scroll down, then when the user returns to portrait mode, the screen is "zoomed out" so to speak. This happens whether or not the user scrolled down while in landscape mode.
I've tried many different things to try to get the scale/zoom/width of the screen right, but no luck. Is there any way to do this?
Thanks in advance!
Answer
The "answer" accepted above is not really an answer, in that disallowing any zooming whatsoever is as bad as asking an IE user to switch to another browser. It's terrible for accessibility. You want to your design to not do funky zoom things that Apple has deemed ideal upon switching view orientation, but you are leaving disabled users in the dust. Highly not recommended.
Try using media queries or a js hook (screen.width, etc) to adjust your design automatically upon orientation change. It's why these attributes are exposed to us as developers.