如何动态设置视口？

Question

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

对于移动端

<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" /> 

- user3758718

Answer 1

举个例子：

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

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

除非您在宽屏幕（即平板电脑）设备上使用，否则您可能希望将布局视口的宽度设置为380像素，此时您可能需要将其加倍至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视口标签。

在页面下载和渲染后，也有可能强制进行更改:

<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>

- Francois Borgies