将我的 iOS 设备升级到 iOS 8.3 后,我注意到元视口初始缩放属性出现了一些奇怪的行为。如果我将初始比例设置为 1.0 以下,并在浏览网页时旋转设备,则整个内容将逐渐变小,最终浏览器将崩溃。
我注意到,每次方向变化时内容变小的程度与您设置的初始比例有关。例如,如果我将其设置为 0.9,则内容每次都会变小 10%。如果我将其设置为 0.6,内容每次都会变小 40%。
由于此错误的性质,它无法在 jsfiddle 上放置或体验。相反,我会将代码粘贴到此处,以便您可以在某处自行测试:
<!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>
您可以将这个损坏的示例与一个工作示例进行比较,该示例的初始比例设置为 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>
在升级到 iOS 8.3 之前,设备轮换工作得很好。多次方向更改后,布局既不会缩小或缩小,浏览器也不会崩溃。
有办法解决这个问题吗?