如何动态设置视口? [英] How to set viewport dynamically?

问题描述

如果我想动态更改视口标签，该怎么办?

If I want to change the viewport tag dynamically, what do I need to do?

对于移动

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

iPad(宽度超过768像素)

iPad (width over 768px)

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

推荐答案

例如:

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

它将布局视口宽度设置为384像素.在大多数现代浏览器中都可以使用.诺基亚WebKit是主要例外.

It sets the layout viewport width to 384 pixels. This works in most modern browsers; Nokia WebKit being the prime exception.

除非您使用的是宽屏设备(如预期的那样阅读平板电脑)，否则您可能希望给布局视口提供380px的宽度，在这种情况下，您可能希望将其倍增到768.或者其他任何方式.

You might want to give the layout viewport a width of 380px unless you’re on a widescreen (read tablet as you expect) device, in which case you might want to double it to 768. Or whatever.

<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视口标签.

This script is executed automatically and changes the meta viewport tag directly.

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

It’s also possible to force a change much later, after the page has been downloaded and rendered:

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

这篇关于如何动态设置视口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！