我开发了一个库来了解桌面和移动浏览器的真实视口大小，因为不同设备的视口大小不一致，无法依赖该帖子的所有答案（根据我对此所做的所有研究）：https://github.com/pyrsmk/W

您还可以获得窗口的宽度和高度，避免浏览器工具栏和其他东西。这是浏览器窗口中的真正可用区域。

为此，请使用：window.innerWidth和window.inerHeight财产（请参阅w3schools上的文档）。

在大多数情况下，这将是最好的方式，例如，显示一个完全居中的浮动模式对话框。它允许您计算窗口上的位置，无论使用浏览器的分辨率方向或窗口大小如何。

这是我的解决方案！

//内部宽度常量screen_viewport_inner=（）=>{设w＝窗口，i=“内部”；if（！（窗口中的`innerWidth`））{i=“客户端”；w=document.documentElement | | document.body；}返回{width:w[`${i}宽度`]，高度：w[`${i}高度`]}};//外侧宽度常量screen_viewport_outer=（）=>{设w＝窗口，o=“外部”；if（！（窗口中的`outerWidth`））{o=“客户端”；w=document.documentElement | | document.body；}返回{width:w[`${o}宽度`]，高度：w[`${o}高度`]}};//样式常量console_color=`颜色：rgba（0255,0,0.7）；字体大小：1.5rem；边框：1px纯红色；`;//测试常量测试=（）=>{让i_obj=screen_viewport_inner（）；console.log（`%c screen_viewport_inner=\n`，console_color，JSON.stringfy（i_obj，null，4））；让o_obj=screen_viewport_out（）；console.log（`%c screen_viewport_outer=\n`，console_color，JSON.stringify（o_obj，null，4））；};//生命(() => {测试（）；})();

我开发了一个库来了解桌面和移动浏览器的真实视口大小，因为不同设备的视口大小不一致，无法依赖该帖子的所有答案（根据我对此所做的所有研究）：https://github.com/pyrsmk/W

您可以使用jQuery获取窗口或文档的大小：

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

对于屏幕大小，可以使用屏幕对象：

window.screen.height;
window.screen.width;

您可以使用Screen对象获取此信息。

以下是它将返回的内容的示例：

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

要获得screenWidth变量，只需使用screen.width，与screenHeight相同，只需选择screen.height。

要获取窗口宽度和高度，请分别为screen.availWidth或screen.avail height。

对于pageX和pageY变量，请使用window.screenX或Y。请注意，这是从非常左/最左/最上的屏幕开始的。因此，如果您有两个宽度为1920的屏幕，那么右屏幕左侧500px的窗口的X值将为2420（1920+500）。然而，screen.width/height显示当前屏幕的宽度或高度。

要获取页面的宽度和高度，请使用jQuery的$（window）.height（）或$（window）.width（）。

再次使用jQuery，为pageX和pageY值使用$（“html”）.offset（）.top和$（“html”）.ooffset（）.left。