视口宽度更改后在iOS上重置缩放 [英] Reset Zoom on iOS after viewport width change
问题描述
我们正在制作HTML5应用程序，其中宽度在设计时不知道。
因此，我们在运行时更改视口标记以匹配所需尺寸。
eg
< meta name =viewportid =viewport-metacontent =width ='+ params.mobilePortraitWidth +'，initial-scale = 1.0，maximum-scale = 1.0，user- scalable = no/>
iOS上的问题是，在我们更改视口大小后，视图不能正确缩放，直到我们加倍点击屏幕。
编辑，双击后很好，所以：我们如何以编程方式双击？
非常感谢
非常感谢您的回复，我想分享我们找到的解决方案基本上，为了使它工作，我们没有设置initial-scale = 1.0，最大值-scale = 1.0，user-scalable = no
以下是一个实例
< HTML>
< head>
< meta name =viewportid =viewport-metacontent =width = device-width，user-scalable = no/>
< style>
html，body {-webkit-text-size-adjust：100％; }
h1 {padding：1em; background-color：＃FF80BB; }
< / style>
< / head>
< body>
< h1>我是网页内容< / h1>
< button id =s320>设置320< / button>< br />
< button id =s640>设置640< /按钮>< br />
< button id =s960>设置960< /按钮>
< script>
函数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>
we are making an HTML5 app where width is not know at design time. So we change the viewport tag at runtime to match the desidered size.
e.g.
<meta name="viewport" id="viewport-meta" content="width=' + params.mobilePortraitWidth + ', initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The problem on iOS is that after we change the viewport size, view is not correctly scaled until we double tap the screen.
EDIT, after double tap is all fine, so: how can we "DOUBLE TAP" programmatically?
Thank you very much
Thank you very much for your replies, I would like to share the solution we found after some test on iPhone 5s with iOS 9.2 and iPad Air with iOS 8.4.
Basically, to make it work, we didn't set initial-scale=1.0, maximum-scale=1.0, user-scalable=no
Following a working example
<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上重置缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
