Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange

Question

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 1

Here is what I use to deal with the zoom on my media-queries:

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

The maximum-scale is the thing that sold it for me. It means the transition from portrait to landscape on an iphone is really smooth with no zoom problems at all...

Answer 2

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.

Answer 3

I had some problems with the zoom levels changing from landscape to portrait, when the content was larger than the viewport. Setting "minimum-scale=1.0", solved this for me.

Answer 4

This wont work if you are running a web-app in safari, but I think it will work if you are using a UIWebView inside your own app.

I havent tested this, but there is an easy way to get your javascript to talk to the objective-c side of the code at which point you would have access to things like the zoom of the web view.

Answer 5

I had this issue too I think. Try putting a "maximum-scale=1.0" (and maybe a "minumum-scale=1.0" if you feel like it) in your viewport tag. This assumes you don't want the user to be able scale though (which I don't)

Answer 6

Using meta tags for this does not work. I've tried every combination of meta tags and orientationchange and gesturechange events possible, I tried timeouts and all kinds of fancy javascript, then I found this: https://github.com/scottjehl/iOS-Orientationchange-Fix

via this related question: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

On that post, Andrew Ashbacher posted a link to the code written by Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

That is a solution wrapped nicely in an IIFE so you don't have to worry about name-space issues.

Just drop it in to your script (not into document.ready() if you're using jQuery) and viola!

All it does is disable zoom on devicemotion events that indicate that orientationchange is imminent. It's the best solution I've seen because it actually works and doesn't disable zoom.

EDIT: this approach is not always reliable, especially when you are holding the ipad at an angle. also, i don't think this event is available to gen 1 ipads

Answer 7

You can set the user-scalable property in the content attribute. Try this:

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

From this answer:

But if you assign User-scalable=no its means website not allow to zoom in or zoom out.