1

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

这是脚本：

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

我该如何进行这项工作？

4

1 回答 1

0

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

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

for2.循环中有错字。将逗号更改为分号。该错字导致标签中的script代码崩溃。

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

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

window.onresize = function(event) {
    width = window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
    ...
}
于 2013-05-14T17:15:16.577 回答