发表新帖
发表新帖

Get the size of the screen, current web page and browser window

前端 未结
关注
19 2379
面向向阳花
面向向阳花 2020-11-21 05:29

How can I get windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight,

相关标签:
19条回答
  • 傲寒
    2020-11-21 06:27

    I developed a library for knowing the real viewport size for desktops and mobiles browsers, because viewport sizes are inconsistents across devices and cannot rely on all the answers of that post (according to all the research I made about this) : https://github.com/pyrsmk/W

    0 讨论(0)
  • 渐次进展
    2020-11-21 06:28

    Full 2020

    I am surprised that question have about 10 years and it looks like so far nobody has given a full answer (with 10 values) yet. So I carefully analyse OP question (especially picture) and have some remarks

    • center of coordinate system (0,0) is in the viewport (browser window without bars and main borders) top left corner and axes are directed to right and down (what was marked on OP picture) so the values of pageX, pageY, screenX, screenY must be negative (or zero if page is small or not scrolled)
    • for screenHeight/Width OP wants to count screen height/width including system menu bar (eg. in MacOs) - this is why we NOT use .availWidth/Height (which not count it)
    • for windowWidth/Height OP don't want to count size of scroll bars so we use .clientWidth/Height
    • the screenY - in below solution we add to position of top left browser corner (window.screenY) the height of its menu/tabls/url bar). But it is difficult to calculate that value if download-bottom bar appears in browser and/or if developer console is open on page bottom - in that case this value will be increased of size of that bar/console height in below solution. Probably it is impossible to read value of bar/console height to make correction (without some trick like asking user to close that bar/console before measurements...)
    • pageWidth - in case when pageWidth is smaller than windowWidth we need to manually calculate size of <body> children elements to get this value (we do example calculation in contentWidth in below solution - but in general this can be difficult for that case)
    • for simplicity I assume that <body> margin=0 - if not then you should consider this values when calculate pageWidth/Height and pageX/Y

    function sizes() {
  let contentWidth = [...document.body.children].reduce( 
    (a, el) => Math.max(a, el.getBoundingClientRect().right), 0) 
    - document.body.getBoundingClientRect().x;

  return {
    windowWidth:  document.documentElement.clientWidth,
    windowHeight: document.documentElement.clientHeight,
    pageWidth:    Math.min(document.body.scrollWidth, contentWidth),
    pageHeight:   document.body.scrollHeight,
    screenWidth:  window.screen.width,
    screenHeight: window.screen.height,
    pageX:        document.body.getBoundingClientRect().x,
    pageY:        document.body.getBoundingClientRect().y,
    screenX:     -window.screenX,
    screenY:     -window.screenY - (window.outerHeight-window.innerHeight),
  }
}



// TEST

function show() {
  console.log(sizes());
}
    body { margin: 0 }
.box { width: 3000px; height: 4000px; background: red; }
    <div class="box">
  CAUTION: stackoverflow snippet gives wrong values for screenX-Y, 
  but if you copy its code to your page directly the values will be right<br>
  <button onclick="show()" style="">CALC</button>
</div>

    I test it on Chrome 83.0, Safari 13.1, Firefox 77.0 and Edge 83.0

    0 讨论(0)
  • 囚心锁ツ
    2020-11-21 06:30

    But when we talk about responsive screens and if we want to handle it using jQuery for some reason, 

    window.innerWidth, window.innerHeight

    gives the correct measurement. Even it removes the scroll-bar's extra space and we don't need to worry about adjusting that space :)

    0 讨论(0)
  • 南旧
    2020-11-21 06:33

    This has everything you need to know: Get viewport/window size

    but in short:

    var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

    Fiddle

    Please stop editing this answer. It's been edited 22 times now by different people to match their code format preference. It's also been pointed out that this isn't required if you only want to target modern browsers - if so you only need the following:

    const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);
    0 讨论(0)
  • 北荒
    2020-11-21 06:33

    If you need a truly bulletproof solution for the document width and height (the pageWidth and pageHeight in the picture), you might want to consider using a plugin of mine, jQuery.documentSize.

    It has just one purpose: to always return the correct document size, even in scenarios when jQuery and other methods fail. Despite its name, you don't necessarily have to use jQuery – it is written in vanilla Javascript and works without jQuery, too.

    Usage:

    var w = $.documentWidth(),
    h = $.documentHeight();

    for the global document. For other documents, e.g. in an embedded iframe you have access to, pass the document as a parameter:

    var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

    Update: now for window dimensions, too

    Ever since version 1.1.0, jQuery.documentSize also handles window dimensions.

    That is necessary because

    • $( window ).height() is buggy in iOS, to the point of being useless
    • $( window ).width() and $( window ).height() are unreliable on mobile because they don't handle the effects of mobile zooming.

    jQuery.documentSize provides $.windowWidth() and $.windowHeight(), which solve these issues. For more, please check out the documentation.

    0 讨论(0)
  • 滥情空心
    2020-11-21 06:33

    In some cases related with responsive layout $(document).height() can return wrong data that displays view port height only. For example when some div#wrapper has height:100%, that #wrapper can be stretched by some block inside it. But it's height still will be like viewport height. In such situation you might use

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

    That represents actual size of wrapper.

    0 讨论(0)
 看不清?
提交回复
热议问题