根据浏览器窗口的宽度设置视口元参数

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;
    ...
}