Question

将iOS设备升级到iOS 8.3后，我注意到了meta视口初始缩放属性的一些奇怪行为。如果我将初始比例设置为1.0并在我在网页上时旋转我的设备，整个内容将逐渐变小，最终浏览器将崩溃。

我注意到每次方向更改后内容的缩小量与您设置初始比例的程度有关。例如，如果我将其设置为0.9，则每次内容将减少10％。如果我将其设置为0.6，则内容每次都会减少40％。

由于此bug的性质，它无法在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之前，设备轮换工作正常。在多次方向更改后，布局既不会缩小，也不会导致浏览器崩溃。

有没有办法解决这个问题？

Answer 1

您无法在最新的iOS 8.3中重现您的某个网站中的错误但是你仍然可以在其他一些网站上重现这个错误。

来自您使用jQuerymobile的评论。

某些版本的 jQuery mobile 可以 incompatbile 与某些版本的 iOS Safari 。

在某些版本中，我们无法完全排除在safari视口缩放中可能出现的错误。但是我们可以做些什么来解决问题。

以下是处理扩展问题的workaround之一。

以下是 jQuery论坛

中的错误topic

以下是有关如何解决 iPhone视口缩放错误的详细article。

在网站中拥有最新的jqueryMobile 总是明智的，因为它可能将拥有jQueryMobile在其中遇到的修复和解决方法较新版本的浏览器。

希望这有帮助。

如有任何疑问，请随时发表评论。

iOS 8.3 - 1.0以下的元视口初始比例导致在方向更改时出现奇怪的内容缩放

1 个答案: