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


当前回答

有时您需要在调整窗口大小和内部内容时查看宽度/高度的变化。

为此,我编写了一个小脚本,它添加了一个日志框,动态地监视所有的大小调整和几乎立即的更新。

它添加了一个具有固定位置和高z索引的有效HTML,但足够小,因此您可以:

在实际现场使用用于测试移动/响应意见

已在:Chrome 40、IE11上测试,但也很有可能在其他/较旧的浏览器上工作…:)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

编辑:现在样式只应用于记录器表元素,而不是应用于所有表-这也是一个jQuery免费解决方案:)

其他回答

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

对于屏幕大小:

globalThis.screen.availWidth 
globalThis.screen.availHeight

对于窗口大小

globalThis.outerWidth
globalThis.outerHeight

对于偏移:

globalThis.pageXOffset
globalThis.pageYOffset

…等等。

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

这里是一个纯JavaScript的跨浏览器解决方案(源代码):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

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

步骤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)

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

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

表示包装器的实际大小。

与屏幕尺寸相关的完整指南

JavaScript

高度:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

注意:当窗口最大化时,这将等于screen.availHeight

宽度:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

滑动分页

高度:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

宽度:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

参考:https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints