jquery获取屏幕宽度

jQuery获取屏幕宽度的方法

使用jQuery获取屏幕宽度可以通过$(window).width()方法实现。该方法返回浏览器视口的宽度（不包含滚动条）。

var screenWidth = $(window).width();
console.log('屏幕宽度：' + screenWidth + 'px');

获取包含滚动条的屏幕宽度

如果需要包含滚动条的宽度，可以使用原生JavaScript的window.innerWidth属性：

var screenWidthWithScrollbar = window.innerWidth;
console.log('包含滚动条的屏幕宽度：' + screenWidthWithScrollbar + 'px');

响应屏幕宽度变化

为了在窗口大小改变时获取最新的屏幕宽度，可以监听resize事件：

$(window).resize(function() {
    var currentWidth = $(window).width();
    console.log('当前屏幕宽度：' + currentWidth + 'px');
});

与CSS媒体查询配合使用

获取的屏幕宽度值可以与CSS媒体查询条件进行比较，实现响应式逻辑：

if ($(window).width() < 768) {
    // 执行移动端布局的代码
} else {
    // 执行桌面端布局的代码
}

注意事项

$(window).width()获取的是视口宽度，而非屏幕分辨率。要获取屏幕的实际分辨率，需使用screen.width属性。

var screenResolution = screen.width;
console.log('屏幕分辨率宽度：' + screenResolution + 'px');