如何获取windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY,这些都可以在所有主要浏览器中使用?


当前回答

您可以使用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。

其他回答

这就是我如何在React JS项目中获得屏幕宽度的方法:

如果宽度等于1680,则返回570,否则返回200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

屏幕有效宽度

您可以使用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;

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

在某些情况下,与响应布局相关的$(document).height()可能会返回错误的数据,仅显示视图端口高度。例如,当某个div#wrapper的高度为100%时,该#wrappers可以被其内部的某个块拉伸。但它的高度仍将与视口高度相同。在这种情况下,您可以使用

$('#wrapper').get(0).scrollHeight

表示包装器的实际大小。

您可以使用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。