How to get the browser viewport dimensions

Question

I want to provide my visitors the ability to see images in high quality  is there any way I can detect the window size   Or better yet  the viewport size of the browser with JavaScript  See green area here

User · Answer

If you are looking for non-jQuery solution that gives correct values in virtual pixels on mobile, and you think that plain window.innerHeight or document.documentElement.clientHeight can solve your problem, please study this link first: https://tripleodeon.com/assets/2011/12/table.html

The developer has done good testing that reveals the problem: you can get unexpected values for Android/iOS, landscape/portrait, normal/high density displays.

My current answer is not silver bullet yet (//todo), but rather a warning to those who are going to quickly copy-paste any given solution from this thread into production code.

I was looking for page width in virtual pixels on mobile, and I've found the only working code is (unexpectedly!) window.outerWidth. I will later examine this table for correct solution giving height excluding navigation bar, when I have time.

User · Answer

A solution that would conform to W3C standards would be to create a transparent div  for example dynamically with JavaScript   set its width and height to 100vw 100vh  Viewport units  and then get its offsetWidth and offsetHeight  After that  the element can be removed again  This will not work in older browsers because the viewport units are relatively new  but if you don t care about them but about  soon-to-be  standards instead  you could definitely go this way   var objNode   document createElement  div    objNode style width     100vw   objNode style height    100vh   document body appendChild objNode   var intViewportWidth    objNode offsetWidth  var intViewportHeight   objNode offsetHeight  document body removeChild objNode     Of course  you could also set objNode style position    fixed  and then use 100  as width height - this should have the same effect and improve compatibility to some extent  Also  setting position to fixed might be a good idea in general  because otherwise the div will be invisible but consume some space  which will lead to scrollbars appearing etc

User · Answer

There is a difference between window innerHeight and document documentElement clientHeight  The first includes the height of the horizontal scrollbar

User · Answer

This code is from http   andylangton co uk articles javascript get-viewport-size-javascript   function viewport         var e   window  a    inner       if     innerWidth  in window              a    client           e   document documentElement    document body            return   width   e  a  Width      height   e  a  Height           NB   to read the width  use console log  viewport width  viewport   width

User · Answer

jQuery dimension functions    window  width   and   window  height

User · Answer

I looked and found a cross browser way    x000D   x000D  function myFunction    x000D    if window innerWidth     undefined  amp  amp  window innerHeight     undefined     x000D      var w   window innerWidth  x000D      var h   window innerHeight  x000D      else     x000D      var w   document documentElement clientWidth  x000D      var h   document documentElement clientHeight  x000D      x000D    var txt    Page size  width     w      height     h  x000D    document getElementById  demo   innerHTML   txt  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt body onresize  myFunction    onload  myFunction    gt  x000D      lt p gt  x000D      Try to resize the page  x000D      lt  p gt  x000D      lt p id  demo  gt  x000D       amp nbsp  x000D      lt  p gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

If you are using React  then with latest version of react hooks  you could use this     Usage function App        const size   useWindowSize        return         lt div gt          size width px    size height px       lt  div gt            https   usehooks com useWindowSize

User · Answer

This is the way I do it  I tried it in IE 8 -  10  FF 35  Chrome 40  it will work very smooth in all modern browsers  as window innerWidth is defined  and in IE 8  with no window innerWidth  it works smooth as well  any issue  like flashing because of overflow   hidden    please report it  I m not really interested on the viewport height as I made this function just to workaround some responsive tools  but it might be implemented  Hope it helps  I appreciate comments and suggestions   function viewportWidth        if  window innerWidth  return window innerWidth    var   doc   document    html   doc  amp  amp  doc documentElement    body   doc  amp  amp   doc body    doc getElementsByTagName  body   0      getWidth   function  elm        if   elm  return 0      var setOverflow   function  style  value          var oldValue   style overflow        style overflow   value        return oldValue               style   elm style  oldValue   setOverflow style   hidden    width   elm clientWidth    0      setOverflow style  oldValue       return width         return Math max      getWidth html       getWidth body

User · Answer

If you aren t using jQuery  it gets ugly  Here s a snippet that should work on all new browsers  The behavior is different in Quirks mode and standards mode in IE  This takes care of it   var elem    document compatMode      CSS1Compat          document documentElement       document body   var height   elem clientHeight  var width   elem clientWidth

User · Answer

You can use the window innerWidth and window innerHeight properties

User · Answer

I was able to find a definitive answer in JavaScript  The Definitive Guide  6th Edition by O Reilly  p  391   This solution works even in Quirks mode  while ryanve and ScottEvernden s current solution do not   function getViewportSize w            Use the specified window or the current window if no argument     w   w    window          This works for all browsers except IE8 and before     if  w innerWidth    null  return   w  w innerWidth  h  w innerHeight            For IE  or any browser  in Standards mode     var d   w document      if  document compatMode     CSS1Compat           return   w  d documentElement clientWidth             h  d documentElement clientHeight            For browsers in Quirks mode     return   w  d body clientWidth  h  d body clientHeight         except for the fact that I wonder why the line if  document compatMode     CSS1Compat   is not if  d compatMode     CSS1Compat    everything looks good

User · Answer

Cross-browser  media  width  and  media  height  values   const vw   Math max document documentElement clientWidth    0  window innerWidth    0  const vh   Math max document documentElement clientHeight    0  window innerHeight    0   window innerWidth and window innerHeight  gets CSS viewport  media  width  and  media  height  which include scrollbars initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the  media values zoom may cause values to be 1px off due to native rounding undefined in IE8-  document documentElement clientWidth and  clientHeight  equals CSS viewport width minus scrollbar width matches  media  width  and  media  height  when there is no scrollbar same as jQuery window  width   which jQuery calls the browser viewport available cross-browser inaccurate if doctype is missing   Resources  Live outputs for various dimensions verge uses cross-browser viewport techniques actual uses matchMedia to obtain precise dimensions in any unit

User · Answer

I know this has an acceptable answer  but I ran into a situation where clientWidth didn t work  as iPhone  at least mine  returned 980  not 320  so I used window screen width  I was working on existing site  being made  responsive  and needed to force larger browsers to use a different meta-viewport    Hope this helps someone  it may not be perfect  but it works in my testing on iOs and Android      sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width      first see if they have window screen width avail    function         if  window screen width              var setViewport               smaller devices         phone   width device-width initial-scale 1 maximum-scale 1 user-scalable no             bigger ones  be sure to set width to the needed and likely hardcoded width of your site at large breakpoints           other   width 1045 user-scalable yes             current browser width         widthDevice  window screen width            your css breakpoint for mobile  etc  non-mobile first         widthMin  560            add the tag based on above vars and environment          setMeta  function                var params    this widthDevice  lt   this widthMin    this phone   this other             var head   document getElementsByTagName  head   0             var viewport   document createElement  meta              viewport setAttribute  name   viewport              viewport setAttribute  content  params             head appendChild viewport                             call it        setViewport setMeta               call this

User · Answer

you can use window addEventListener  resize    yourfunction   it will runs yourfunction when the window resizes  when you use window innerWidth or document documentElement clientWidth it is read only  you can use if statement in yourfunction and make it better

[javascript] How to get the browser viewport dimensions?

Examples related to javascript

Examples related to cross-browser

Examples related to viewport