iphone - 在 Mobile Safari 中动态更改元视口(viewport)属性

Question

我正在开发一个自适应网站，我们通过媒体查询为手机和平板电脑提供不同的样式表。

目标是为 Iphone 和 iPad 提供良好的体验，并尽可能地尝试和消除 Mobile Safari 方向错误。我已经查看了各种可能的解决方案，但它们要么似乎无法正常工作，要么不适合该项目，直到我认为我从 PPK's site 中找到了答案。他暗示可以在声明后立即使用 Javascript 动态更改视口(viewport)。

我试过下面的代码没有用:

<meta name="viewport" id="testViewport" content="user-scalable=yes" />
<script>
var mvp = document.getElementById('testViewport');
if (screen.width < 740) {
    alert("mobile screen");
    mvp.setAttribute('content','320');
}
var value = mvp.getAttribute("content");
alert(value);
</script>

我的警报在我期望的位置被调用(因此在 iPhone 上，最终警报显示“值”为 == 320)但视口(viewport)自然会显示它。

请注意，我最初将“user-scalable=yes”放在内容属性中以防止它为空，我试图找出问题所在。

如有任何线索或提示，我们将不胜感激!

Answer 1

根据https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html ，您应该使用正确的字符串 width = 320 设置视口(viewport):

mvp.setAttribute('content','width = 320');