jquery获取屏幕宽度

使用 jQuery 获取屏幕宽度

通过 jQuery 可以轻松获取屏幕的宽度，以下是几种常用的方法：

方法一：使用 $(window).width()
这种方法返回浏览器窗口的可视区域宽度（不包括滚动条）。

var screenWidth = $(window).width();
console.log("屏幕宽度（可视区域）: " + screenWidth);

方法二：使用 $(document).width()
这种方法返回整个文档的宽度，通常与窗口宽度相同，除非页面内容超出可视区域。

var docWidth = $(document).width();
console.log("文档宽度: " + docWidth);

方法三：使用原生 JavaScript 的 window.innerWidth
虽然 jQuery 提供了便捷的方法，但原生 JavaScript 也能实现相同的功能。

var innerWidth = window.innerWidth;
console.log("屏幕宽度（包括滚动条）: " + innerWidth);

注意事项

• $(window).width() 不包括滚动条宽度，而 window.innerWidth 包括滚动条宽度。
• 如果页面有缩放或响应式布局，可能需要结合 window.devicePixelRatio 进一步处理。

示例代码

以下是一个完整的示例，展示如何动态获取屏幕宽度并在控制台输出：

$(document).ready(function() {
    var windowWidth = $(window).width();
    var documentWidth = $(document).width();
    var innerWidth = window.innerWidth;

    console.log("jQuery 窗口宽度: " + windowWidth);
    console.log("jQuery 文档宽度: " + documentWidth);
    console.log("原生 innerWidth: " + innerWidth);
});

响应式场景中的应用

在响应式设计中，可以通过监听窗口大小变化实时获取宽度：

$(window).resize(function() {
    var currentWidth = $(window).width();
    console.log("当前窗口宽度: " + currentWidth);
});