javascript - 根据浏览器窗口的宽度设置视口(viewport)元参数

Question

我想根据当前浏览器窗口为视口(viewport)元标记设置不同的参数，并且能够在调整大小时更改它们(首先删除当前视口(viewport)元标记，然后用新的元标记替换它)。我有一个脚本，我认为应该做到这一点，但由于某种原因，该脚本什么也没做。我错过了一些东西，但我不太明白是什么。

这是脚本:

<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 获取视口(viewport)宽度的更安全方法是:

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

2. for 循环中存在拼写错误。将逗号更改为分号。该拼写错误导致 script 标记中的代码崩溃。

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

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

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