我正在开发一个自适应网站,我们通过媒体查询为手机和平板电脑提供不同的样式表。
目标是为 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”放在内容属性中以防止它为空,我试图找出问题所在。
如有任何线索或提示,我们将不胜感激!
最佳答案
根据https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html ,您应该使用正确的字符串 width = 320
设置视口(viewport):
mvp.setAttribute('content','width = 320');
关于iphone - 在 Mobile Safari 中动态更改元视口(viewport)属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9517480/