Question

我们正在制作HTML5应用，其中宽度在设计时不知道。因此，我们在运行时更改视口标记以匹配所需的大小。

e.g。

<meta name="viewport" id="viewport-meta" content="width=' + params.mobilePortraitWidth + ', initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

iOS上的问题是，在我们更改视口大小后，在我们双击屏幕之前，视图未正确缩放。

编辑，双击后一切都很好，所以：我们怎样才能以编程方式“DOUBLE TAP”？

非常感谢

Answer 1

NSString *js = @"var t=document.createElement('meta'); t.name="viewport"; t.content="initial-scale=1.0, maximum-scale=3.0"; document.getElementsByTagName('head')[0].appendChild(t);";
[myWebView stringByEvaluatingJavaScriptFromString:js];

EDIT
感谢您的更新我有类似的问题，并记住设置视口元标记解决了它如果您在加载html后尝试修改此元标记，请尝试在webViewDidFinishLoad中执行此操作（loadRequest是异步的）。

另一个解决方案是将您的html文件读入NSString并替换该元标记，然后再将其加载到webView。
希望它有所帮助！

Answer 2

非常感谢您的回复，我想分享我们在使用iOS 9.2和iPad Air与iOS 8.4进行iPhone 5s测试后找到的解决方案。

基本上，为了使它工作，我们没有设置initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no

按照工作实例

<html>
<head>
    <meta name="viewport" id="viewport-meta" content="width=device-width, user-scalable=no" />
    <style>
        html, body { -webkit-text-size-adjust: 100%; }
        h1 { padding: 1em; background-color: #FF80BB; }
    </style>
</head>
<body>
    <h1>I am the page content</h1>
    <button id="s320">Set 320</button><br />
    <button id="s640">Set 640</button><br />
    <button id="s960">Set 960</button>
    <script>
        function setViewportWidth(newWidth) {
          var m = document.getElementById("viewport-meta");
          m.setAttribute('content', 'width=' + newWidth + ', user-scalable=no');
        }
        document.getElementById("s320").onclick = function () { return setViewportWidth(320); };
        document.getElementById("s640").onclick = function () { return setViewportWidth(640); };
        document.getElementById("s960").onclick = function () { return setViewportWidth(960); };
    </script>
</body>
</html>

在视口宽度更改后重置iOS上的缩放

2 个答案: