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

Question

How can I get windowWidth  windowHeight  pageWidth  pageHeight  screenWidth  screenHeight  pageX  pageY  screenX  screenY which will work in all major browsers

User · Answer

Complete guide related to Screen sizes  JavaScript  For height   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     Note  When the window is maximized this will equal screen availHeight  For width    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    Jquery  For height     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                             For width     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    Reference  https   help optimizely com Build Campaigns and Experiments Use screen measurements to design for responsive breakpoints

User · Answer

You can get the size of the window or document with jQuery      Size of browser viewport    window  height      window  width        Size of HTML document  same as pageHeight pageWidth in screenshot     document  height      document  width      For screen size you can use the screen object   window screen height  window screen width

User · Answer

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  lt body gt  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  lt body gt  margin 0 - if not then you should consider this values when calculate pageWidth Height and pageX Y   x000D   x000D  function sizes       let contentWidth       document body children  reduce        a  el    gt  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       x000D  body   margin  0    box   width  3000px  height  4000px  background  red    x000D   lt div class  box  gt    CAUTION  stackoverflow snippet gives wrong values for screenX-Y     but if you copy this code to your page directly the values will be right lt br gt     lt button onclick  show    style    gt CALC lt  button gt   lt  div gt  x000D   x000D   x000D   I test it on Chrome 83 0  Safari 13 1  Firefox 77 0 and Edge 83 0 on MacOs High Sierra

User · Answer

You can also get the WINDOW width and height  avoiding browser toolbars and other stuff  It is the real usable area in browser s window   To do this  use  window innerWidth  and  window innerHeight properties  see doc at w3schools    In most cases it will be the best way  in example  to display a perfectly centred floating modal dialog  It allows you to calculate positions on window  no matter which resolution orientation or window size is using the browser

User · Answer

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

User · Answer

A non-jQuery way to get the available screen dimension  window screen width height has already been put up  but for responsive webdesign and completeness sake I think its worth to mention those attributes   alert window screen availWidth   alert window screen availHeight     http   www quirksmode org dom w3c cssom html t10       availWidth and availHeight - The available width and height on the   screen  excluding OS taskbars and such

User · Answer

To check height and width of your current loaded page of any website using  console  or after clicking  Inspect    step 1   Click the right button of mouse and click on  Inspect  and then click  console   step 2  Make sure that your browser screen should be not in  maximize  mode  If the browser screen is in  maximize  mode  you need to first click the maximize button  present either at right or left top corner  and un-maximize it    step 3  Now  write the following after the greater than sign       i e            gt  window innerWidth             output   your present window width in px  say 749           gt  window innerHeight             output   your present window height in px  say 359

User · Answer

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

User · Answer

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

User · Answer

here is my solution    x000D   x000D     innerWidth x000D  const screen viewport inner        gt    x000D      let w   window  x000D          i    inner   x000D      if     innerWidth  in window     x000D          i    client   x000D          w   document documentElement    document body  x000D        x000D      return   x000D          width  w    i Width    x000D          height  w    i Height   x000D        x000D     x000D   x000D   x000D     outerWidth x000D  const screen viewport outer        gt    x000D      let w   window  x000D          o    outer   x000D      if     outerWidth  in window     x000D          o    client   x000D          w   document documentElement    document body  x000D        x000D      return   x000D          width  w    o Width    x000D          height  w    o Height   x000D        x000D     x000D   x000D     style x000D  const console color     x000D      color  rgba 0 255 0 0 7   x000D      font-size  1 5rem  x000D      border  1px solid red  x000D     x000D   x000D   x000D   x000D     testing x000D  const test        gt    x000D      let i obj   screen viewport inner    x000D      console log   c screen viewport inner    n   console color  JSON stringify i obj  null  4    x000D      let o obj   screen viewport outer    x000D      console log   c screen viewport outer    n   console color  JSON stringify o obj  null  4    x000D     x000D   x000D     IIFE x000D        gt    x000D      test    x000D        x000D   x000D   x000D

User · Answer

With the introduction of globalThis in ES2020 you can use properties like   For screen size   globalThis screen availWidth  globalThis screen availHeight   For Window Size  globalThis outerWidth globalThis outerHeight   For Offset   globalThis pageXOffset globalThis pageYOffset       amp  so on    x000D   x000D  alert  Screen Width     globalThis screen availWidth    nScreen Height     globalThis screen availHeight  x000D   x000D   x000D

User · Answer

Here is a cross browser solution with pure JavaScript  Source     var width   window innerWidth    document documentElement clientWidth    document body clientWidth   var height   window innerHeight    document documentElement clientHeight    document body clientHeight

User · Answer

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

User · Answer

You can use the Screen object to get this   The following is an example of what it would return   Screen       availWidth  1920      availHeight  1040      width  1920      height  1080      colorDepth  24      pixelDepth  24      top  414      left  1920      availTop  414      availLeft  1920     To get your screenWidth variable  just use screen width  same with screenHeight  you would just use screen height   To get your window width and height  it would be screen availWidth or screen availHeight respectively   For the pageX and pageY variables  use window screenX or Y  Note that this is from the VERY LEFT TOP OF YOUR LEFT TOP-est SCREEN  So if you have two screens of width 1920 then a window 500px from the left of the right screen would have an X value of 2420  1920 500   screen width height  however  display the CURRENT screen s width or height   To get the width and height of your page  use jQuery s   window  height   or   window  width     Again using jQuery  use    html   offset   top and    html   offset   left for your pageX and pageY values

User · Answer

Sometimes you need to see the width height changes while resizing the window and inner content   For that I ve written a little script that adds a log box that dynamicly monitors all the resizing and almost immediatly updates   It adds a valid HTML with fixed position and high z-index  but is small enough  so you can    use it on an actual site  use it for testing mobile responsive views   Tested on  Chrome 40  IE11  but it is highly possible to work on other older browsers too           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 lt 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             lt tr gt  lt th gt SOURCE lt  th gt  lt th gt WIDTH lt  th gt  lt th gt x lt  th gt  lt th gt HEIGHT lt  th gt  lt  tr gt            lt tr gt  lt td gt screen lt  td gt  lt td id  screen Width    gt  lt td gt x lt  td gt  lt td id  screen Height    gt  lt  tr gt            lt tr gt  lt td gt window lt  td gt  lt td id  window Width    gt  lt td gt x lt  td gt  lt td id  window Height    gt  lt  tr gt            lt tr gt  lt td gt document lt br gt  documentElement lt  td gt  lt td id  documentElement Width    gt  lt td gt x lt  td gt  lt td id  documentElement Height    gt  lt  tr gt            lt tr gt  lt td gt document body lt  td gt  lt td id  body Width    gt  lt td gt x lt  td gt  lt td id  body Height    gt  lt  tr gt          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      EDIT  Now styles are applied only to logger table element - not to all tables - also this is a jQuery-free solution

User · Answer

I wrote a small javascript bookmarklet you can use to display the size  You can  easily add it to your browser and whenever you click it you will see the size in the right corner of your browser window   Here you find information how to use a bookmarklet  https   en wikipedia org wiki Bookmarklet   Bookmarklet  javascript  function    function   var i n e return n function   var n e t return t  background-color azure  padding 1rem  position fixed  right  0  z-index 9999  font-size  1 2rem   n i   lt div style    t    gt  lt  div gt    e function   return  lt p style  margin 0   gt width    i window  width     height    i window  height     lt  p gt    n html e    i  body   prepend n  i window  resize function   n html e        i window jQuery   i window jQuery n     e document createElement  script   e src  http   ajax googleapis com ajax libs jquery 1 jquery min js  e onload n document body appendChild e        call this     Original Code  The original code is in coffee    - gt    addWindowSize     - gt      style    background-color azure  padding 1rem  position fixed  right  0  z-index 9999  font-size  1 2rem        windowSize       lt div style      style      gt  lt  div gt         getWindowSize   - gt          lt p style  margin 0   gt width        window  width       height        window  height       lt  p gt         windowSize html getWindowSize          body   prepend  windowSize       window  resize - gt         windowSize html getWindowSize         return    if       window jQuery        typeof jQuery   undefined  works too     script   document createElement  script       script src    http   ajax googleapis com ajax libs jquery 1 jquery min js      script onload   addWindowSize     document body appendChild script   else         window jQuery     addWindowSize         Basically the code is prepending a small div which updates when you resize your window

User · Answer

function wndsize      var w   0 var h   0      IE   if  window innerWidth       if   document documentElement clientWidth    0            strict mode       w   document documentElement clientWidth h   document documentElement clientHeight        else          quirks mode       w   document body clientWidth h   document body clientHeight            else         w3c     w   window innerWidth h   window innerHeight        return  width w height h     function wndcent      var hWnd    arguments 0     null    arguments 0     width 0 height 0     var  x   0 var  y   0 var offsetX   0 var offsetY   0      IE   if  window pageYOffset         strict mode     if   document documentElement scrollTop    0   offsetY   document documentElement scrollTop offsetX   document documentElement scrollLeft         quirks mode     else offsetY   document body scrollTop offsetX   document body scrollLeft          w3c     else offsetX   window pageXOffset offsetY   window pageYOffset   x     wndsize   width-hWnd width  2  offsetX  y     wndsize   height-hWnd height  2  offsetY      return x  x y  y     var center   wndcent  width 350 height 350    document write center x    lt br gt     document write center y    lt br gt     document write   lt DIV align  center  id  rich ad  style  Z-INDEX  10  left   center x  px WIDTH  350px  POSITION  absolute  TOP    center y  px  HEIGHT  350px  gt  lt  --                                 flash       -- gt  lt  div gt

User · Answer

This how I managed to get the screen width in React JS Project   If width is equal to 1680 then return 570 else return 200  var screenWidth   window screen availWidth    lt Label style    width  screenWidth     1680    570   200  color   transparent     gt a   lt  Label gt    Screen availWidth

User · Answer

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

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

Examples related to javascript

Examples related to html

Examples related to jquery

Examples related to layout

Examples related to cross-browser