使用 Javascript 检测屏幕的宽度

Detecting a screen's width with Javascript

本文关键字：屏幕 Javascript 检测 使用      更新时间：2023-09-26
if(screen.availWidth > 850){
    //Do this
} else {
    //Do this   
}

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

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

为此：

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

我相当确定这考虑到了放大，但我从未测试过。

将事件处理程序绑定到 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 */
}
相关文章：