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

Question

将我的 iOS 设备升级到 iOS 8.3 后，我注意到元视口初始缩放属性出现了一些奇怪的行为。如果我将初始比例设置为 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 的 cmets。

某些版本的 jQuery mobile 可能与某些版本的 iOS Safari不兼容。

我们不能完全排除在某些版本中safari viewport scaling 中可能存在的错误。但我们能做的就是解决问题。

这是处理缩放问题的workaround之一。

这是 jQuery 论坛中的一个错误 topic

这里有一个详细的article@关于如何解决 iPhone 视口缩放错误。

在您的 站点 中拥有 最新的 jqueryMobile 总是明智的，因为它可能 会有 jQueryMobile 在较新版本的浏览器。

希望这会有所帮助。

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