使用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 event：

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

如果你使用jQuery：

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

此外，如果您想创建响应式设计，请考虑使用CSS media queries。如果用户缩放或调整浏览器窗口大小，这会自动调整页面，如果用户停用了JavaScript，则会自动调整。

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