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


当前回答

您可以使用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_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));};//生命(() => {测试();})();

随着globalThis在ES2020中的引入,您可以像使用财产一样使用。

对于屏幕大小:

globalThis.screen.availWidth 
globalThis.screen.availHeight

对于窗口大小

globalThis.outerWidth
globalThis.outerHeight

对于偏移:

globalThis.pageXOffset
globalThis.pageYOffset

…等等。

alert(“屏幕宽度:”+globalThis.Screen.avaidWidth+“\n屏幕高度:”+globalThis.Screen.avaidHeight)

使用“控制台”或单击“检查”后,检查任何网站当前加载页面的高度和宽度。

步骤1:单击鼠标右键,单击“检查”,然后单击“控制台”

步骤2:确保您的浏览器屏幕不应处于“最大化”模式。如果浏览器屏幕处于“最大化”模式,您需要首先单击最大化按钮(位于右上角或左上角),然后取消最大化。

步骤3:现在,在大于号('>')后面写以下内容,即。

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

获取可用屏幕维度的非jQuery方法。window.screen.width/height已经发布,但为了响应Web设计和完整性,我认为值得提及这些属性:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth和availHeight-屏幕(不包括OS任务栏等)。

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