文章/答案/技术大牛

发布

社区首页 >问答首页 >在视口宽度改变后在iOS上重置缩放

问在视口宽度改变后在iOS上重置缩放
EN

Stack Overflow用户

提问于 2015-12-22 16:43:55

回答 1查看 3.2K关注 0票数 2

我们正在制作一个在设计时不知道宽度的HTML5应用程序。因此，我们在运行时更改viewport标记，以匹配需要的大小。

例如：

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

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

编辑，后双点击都是好的，所以:我们如何“双点击”编程？

非常感谢

css

html

ios

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-23 10:22:06

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

基本上，为了使其工作，我们没有设置初始刻度=1.0，最大比例尺=1.0，用户可伸缩性=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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34420584

复制

相似问题

问在视口宽度改变后在iOS上重置缩放
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在视口宽度改变后在iOS上重置缩放EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在视口宽度改变后在iOS上重置缩放
EN