Question

如果我想动态更改视口标记，我需要做什么？

For Mobile

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

iPad（宽度超过768像素）

<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=2, user-scalable=yes" />

Answer 1

样本：

<meta name="viewport" content="width = 384" id="myViewport">

它将布局视口宽度设置为384像素。这适用于大多数现代浏览器;诺基亚WebKit是主要的例外。

您可能希望为布局视口指定宽度为380px，除非您使用宽屏（按预期阅读平板电脑）设备，在这种情况下，您可能需要将其加倍至768.或者其他任何内容。

<meta id="myViewport" name="viewport" content="width = 384">
<script>
if (screen.width > 768) {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=768');
}
</script>

此脚本自动执行并直接更改元视口标记。

在下载并呈现页面之后，也可以在以后强制进行更改：

<meta id="myViewport" name="viewport" content="width = 384">
<script>
window.onload = function () {
    if (screen.width > 768) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=768');
    }
}
</script>

如何动态设置视口？

1 个答案: