Menu
After upgrading my iOS devices to iOS 8.3 I noticed some weird behavior with the meta viewport initial scale property. If I set the initial scale under 1.0 and rotate my device while I am on a webpage, the whole content will get progressively smaller and eventually the browser will crash.
I noticed that the amount of how much smaller the content gets with each orientation change is linked to how much you set the initial scale. For example if I set it to 0.9, the content will get 10% smaller every time. If I set it to 0.6, the content will get 40% smaller every time.
Due to the nature of this bug, it cannot be put or experienced on jsfiddle. Instead I will paste the code right here so you can test it yourself somewhere:
<!doctype html>
<html>
<head>
<title>initial scale under 1.0</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=0" />
</head>
<body>
<div id = "wrapper">
<h1>Hello, run this page on iOS 8.3 device and change the orientation multiple times to make this text go smaller and eventually crash the browser!</h1>
</div>
</body>
</html>
You can compare that broken example with a working one, which has the initial-scale set to 1.0:
<!doctype html>
<html>
<head>
<title>initial scale 1.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
</head>
<body>
<div id = "wrapper">
<h1>This text will not get smaller nor will the browser crash when you rotate your device multiple times!</h1>
</div>
</body>
</html>
Before upgrading to iOS 8.3 the device rotation worked just fine. The layout neither get zoomed out or in nor did the browser crash after multiple orientation changes.
Is there a way to fix this issue?
803
You couldn't reproduce the bug in one of your sites in the latest iOS 8.3 But you could still reproduce the bug in some of your other sites.
From the comments you are using jQuerymobile.
some versions of jQuery mobile can be incompatbile with some versions of iOS Safari.
We can't completely rule out the possible bug in safari viewport scaling in some versions.But what we can do we can do a workaround to solve the problem.
Here is a one of the workaround to deal with scaling problem.
Here is a bug topic in jQuery forum
Here is a detailed article on how to solve the iPhone viewport scale bug.
It is always wise to have the latest jqueryMobile in your site as it possibly will have the fixes and workarounds that jQueryMobile encounters in the newer versions of browser.
Hope this helps.
Feel free to comment for any doubts.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
