Question

我有一个网站，我想在所有移动设备上完美地访问网站。为此，我设置了如下的

视口元素

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

它似乎在大多数设备上都能完美运行，但在iOS设备上，它似乎忽略了元视口标记。我尝试过像

这样的解决方法

1：添加了带延迟的元标记

<body onload="javaScript:onloadHandler();">

<script type="text/javascript">
    function onloadHandler() {
        var meta = document.createElement('meta');
        meta.setAttribute('name', 'viewport');
        meta.setAttribute('content', 'width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;');
        document.getElementsByTagName('head')[0].appendChild(meta);
        if (typeof window["bodyOnload"] != 'undefined') {
            bodyOnload();
        }
    }
</script>

结果：大多数情况下它没有正确显示缩放级别。有时候页面左上角走投无路。

根据设备像素比计算出比例，并将该比例值用于初始比例。

<script type="text/javascript"> 

var scale = 1 / window.devicePixelRatio;

var viewportTag = "<meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=1, user-scalable=no\"/>";     

document.write(viewportTag);        

</script>

结果：它没有正确显示缩放级别。

看起来问题在于初始比例值。

有没有人有任何想法如何使用iOS 8将其缩小到正确的缩放级别？

编辑：

此问题来自iOS 8.仅当用户尝试打开多个弹出窗口时才会出现缩放问题。 iOS 8的弹出窗口有一个错误。一旦Apple修复了弹出窗口的问题，希望解决扩展问题。

Answer 1

使用8.1.2的新更新解决了此问题。

iOS 8似乎忽略了元视口的初始规模

1 个答案: