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

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

ios css html

视口宽度更改后重置iOS上的缩放,ios,css,html,Ios,Css,Html,我们正在制作一个HTML5应用程序，在设计时宽度是未知的。因此，我们在运行时更改视口标记以匹配设计的大小 e、 g iOS上的问题是，在更改视口大小后，只有双击屏幕才能正确缩放视图编辑，双击后就可以了，那么：我们如何通过编程“双击”呢非常感谢NSString*js=@“var t=document.createElement（'meta'）；t.name=“viewport”；t.content=“initial scale=1.0，maximum scale=3.0”；documen

我们正在制作一个HTML5应用程序，在设计时宽度是未知的。因此，我们在运行时更改视口标记以匹配设计的大小

e、 g

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

编辑，双击后就可以了，那么：我们如何通过编程“双击”呢

非常感谢

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）；”； 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]; [myWebView stringByEvaluatingJavaScriptFromString:js]；编辑
感谢您的更新。
我遇到了非常类似的问题，还记得设置viewport meta标记解决了这个问题。
如果您正试图在加载html后修改此元标记，请尝试在

webviewdiffinishload

中进行修改（

loadRequest

是异步的）。

另一个解决方案是将html文件读入

NSString

，并在加载到webView之前替换该元标记。

希望有帮助

非常感谢您的回复，我想分享一下我们在iOS 9.2版iPhone 5s和iOS 8.4版iPad Air上测试后发现的解决方案

基本上，为了让它工作，我们没有设置初始规模=1.0，最大规模=1.0，用户可伸缩=否

遵循一个工作示例

<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>


html，正文{-webkit文本大小调整：100%；}
h1{填充：1em；背景色：#FF80BB；}
我是网页的内容
设置320

设置640

第960组
函数setViewportWidth（newWidth）{
var m=document.getElementById（“视口元”）；
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）；}；

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

<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>