Question

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

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

我尝试了以下代码无效：

<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），但视口自然会显示它。

注意，我在内容属性中初步设置了'user-scalable = yes'，以防止它变空，在我试图找出错误的时候。

非常感谢任何线索或提示！

Answer 1

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

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

Answer 2

只需使用：

<meta name=viewport content="width=device-width,initial-scale=1.0">

以及iOS-Orientationchange-Fix

在Mobile Safari中动态更改元视口属性

2 个答案: