javascript - 使用 Javascript 检测屏幕的宽度

Question

if(screen.availWidth > 850){
    //Do this
} else {
    //Do this   
}

这就是我现在所拥有的。我现在的问题是如果有人要放大页面，我希望改变宽度，因为它会影响页面的显示方式。

Answer 1

您不应该更担心有人调整浏览器窗口的大小吗？不是每个人都保持浏览器最大化。

去做这个：

if( (window.innerWidth || document.documentElement.clientWidth) > 850) {
    // do something
}
else {
    // do other thing
}

我相当肯定这考虑了缩放，但我从未测试过。

Answer 2

将事件处理程序绑定到window.onresize 事件：

window.onresize = function(event) {
    if (screen.availWidth > 850) { ... }
};

如果你使用 jQuery：

$(window).resize(function(){
    if ($(window).width() > 850) { ... }
});

此外，如果您想创建响应式设计，请考虑使用CSS 媒体查询。如果用户缩放或调整浏览器窗口大小，这会自动调整页面，并且如果用户停用了 JavaScript，它也可以工作。

/* CSS */
@media (min-width: 850px) {
    /* style */
}