Question

我想为视口元标记设置不同的参数，具体取决于当前的浏览器窗口，并且能够在调整大小时更改它们（首先删除当前视口元标记，然后用新标记替换它）。我有一个脚本，我认为应该这样做，但由于某种原因，脚本什么都不做。我错过了一些东西，但我无法弄清楚是什么。

这是脚本：

<script type="text/javascript">

var width = window.clientWidth; 
var meta = document.createElement("meta");
var head = document.getElementsByTagName("head")[0];

if (width < 960) {  
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=0.5");
    head.appendChild(meta);
} else {
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=1");
    head.appendChild(meta);
};

window.onresize = function(event) { 
    width = window.clientWidth; 
    var metas = document.getElementsByTagName("meta");
    for (var i = 0; i < metas.length; i++) {
        if (metas[i].getAttribute("name") == "viewport") {
            head.removeChild(metas[i]);
        }
    }   
    if (width < 960) {
        meta.setAttribute("name", "viewport");
        meta.setAttribute("content", "width=device-width, initial-scale=0.78");
        head.appendChild(meta);
    } else {
        meta.setAttribute("name", "viewport");
        meta.setAttribute("content", "width=device-width, initial-scale=1");
        head.appendChild(meta);
    }
};
</script>

如何使这项工作？

Answer 1

1。 window.clientWidth可能无法在某些浏览器中使用。使用纯JavaScript获取视口宽度的更安全的方法是：

var width = window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;

2。 for循环中有一个拼写错误。将逗号更改为分号。这个错字导致script标签中的代码崩溃。

for (var i = 0; i < metas.length; i++) {
    ...
}

3。在onresize事件处理程序中未检索当前宽度。它仍然使用初始视口宽度。

window.onresize = function(event) {
    width = window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
    ...
}

基于浏览器窗口宽度设置视口元参数

1 个答案: