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 中重现您网站中的一个错误但是您仍然可以在您的其他一些站点中重现该错误。

来自您正在使用 jQuery移动设备的评论。

某些版本的jQuery移动可以不兼容与某些版本的iOS Safari.

我们不能完全排除 Safari 视口缩放中可能存在的错误 在一些 versions.But 我们可以做的事情中，我们可以做一个解决方法来解决这个问题。

这是 workaround 之一，用于处理 缩放问题 。

这是 jQuery 论坛

中的一个错误 topic

这里有详细的article如何解决iPhone视口缩放错误。

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

希望对您有所帮助。

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

iOS 8.3 - 低于 1.0 的元视口初始比例导致方向变化时奇怪的内容缩放

iOS 8.3 - Meta viewport initial scale under 1.0 results in weird content scaling on orientation change

html

mobile

viewport

ios

web