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 under 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 did not get zoomed out or in nor did the browser crash after multiple orientation changes.
Is there a way to fix this issue?
Aucun commentaire:
Enregistrer un commentaire