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

【问题标题】：Reset Zoom on iOS after viewport width change视口宽度更改后在 iOS 上重置缩放
【发布时间】：2015-12-22 16:43:55
【问题描述】：

我们正在制作一个在设计时不知道宽度的 HTML5 应用程序。所以我们在运行时更改视口标签以匹配所需的大小。

例如

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

iOS 上的问题是，在我们更改视口大小后，只有双击屏幕才能正确缩放视图。

编辑，双击后一切正常，那么：我们如何以编程方式“双击”？

非常感谢

【问题讨论】：

标签： ios css html

【解决方案1】：

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

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

另一种解决方案是将您的 html 文件读入 NSString 并在将其加载到 webView 之前替换该元标记。
希望对您有所帮助！

【讨论】：

您好，谢谢您的代码，我已经更改了答案，因为我解释得不好，我不需要动态更改视口（已经这样做了），我需要设置比例或Safari 视图的缩放级别以适合我的内容，因为 iOS 是唯一不会自动重置它的操作系统。在屏幕上双击后一切正常，所以我想复制这种行为。

【解决方案2】：

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

基本上，为了让它工作，我们没有设置 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>

【讨论】：