Get the height and width of the browser viewport without scrollbars using jquery

Question

How do I get the height and width of the browser viewport without scrollbars using jQuery   Here is what I have tried so far          var viewportWidth      body   innerWidth           var viewportHeight      body   innerHeight      This solution does not take into account the browser scrollbars

User · Answer

Don t use jQuery  just use javascript for correct result   This includes scrollbar width height    x000D   x000D  var windowWidth   window innerWidth  x000D  var windowHeight   window innerHeight  x000D   x000D  alert  viewport width is     windowWidth     and viewport height is     windowHeight   x000D   x000D   x000D    This excludes scrollbar width height    x000D   x000D  var widthWithoutScrollbar   document body clientWidth  x000D  var heightWithoutScrollbar   document body clientHeight  x000D   x000D  alert  viewport width is     widthWithoutScrollbar     and viewport height is     heightWithoutScrollbar   x000D   x000D   x000D

User · Answer

document  ready function          calculate the window height  amp  add css properties for height 100     wh      window   height       ww      window   width           targeted-div   css   height   wh   width   ww

User · Answer

I wanted a different look of my website for width screen and small screen  I have made 2 CSS files  In Java I choose which of the 2 CSS file is used depending on the screen width  I use the PHP function echo with in the echo-function some javascript   my code in the  lt header gt  section of my PHP-file    lt  php echo    lt script gt      if   window innerWidth  gt  400                document write   lt link href   kekemba resort stylesheetblog-jun2018 css   rel   stylesheet   type   text css   gt           else               document write   lt link href   kekemba resort stylesheetblog-jun2018small css   rel   stylesheet   type   text css   gt        lt  script gt        gt

User · Answer

Description The following will give you the size of the browsers viewport  Sample   window  height         returns height of browser viewport   window  width         returns width of browser viewport  More Information  jQuery height   jQUery width

User · Answer

window  height      window  width      More info   http   api jquery com height  http   api jquery com width    Using jQuery is not essential for getting those values  however  Use   document documentElement clientHeight  document documentElement clientWidth    to get sizes excluding scrollbars  or  window innerHeight  window innerWidth    to get the whole viewport  including scrollbars    document documentElement clientHeight  lt   window innerHeight      is always true

User · Answer

You re using the wrong method calls  A viewport is the  window  that s open on the document  how much of it you can see and where   Using   window  height   will not give you the viewport size it will give you the size of the entire window  which is usually the size of the entire document though the document could be even larger   To get the size of the actual viewport use window innerHeight and window innerWidth   https   gist github com bohman 1351439  Do not use the jQuery methods  e g    window  innerHeight    as these give the wrong numbers  They give you the window s height  not innerHeight

User · Answer

Here is a generic JS which should work in most browsers  FF  Cr  IE6     var viewportHeight  var viewportWidth  if  document compatMode      BackCompat         viewportHeight   document body clientHeight      viewportWidth   document body clientWidth    else       viewportHeight   document documentElement clientHeight      viewportWidth   document documentElement clientWidth

User · Answer

The script   window  height   does work well  showing the viewport s height and not the document with scrolling height   BUT it needs that you put correctly the doctype tag in your document  for example these doctypes   For html5   lt  doctype html gt   for transitional html4   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   Probably the default doctype assumed by some browsers is such  that   window  height   takes the document s height and not the browser s height  With the doctype specification  it s satisfactorily solved  and I m pretty sure you peps will avoid the  changing scroll-overflow to hidden and then back   which is  I m sorry  a bit dirty trick  specially if you don t document it on the code for future programmer s usage   Moreover  if you are doing a script  you can invent tests to help programmers in your libraries  let me invent a couple         document  ready function         if typeof     undefined             alert  Error  you haven t called JQuery library              if document doctype  null    screen height  lt  parseInt   window  height                alert  ERROR  check your doctype  the calculated heights are not what you might expect

User · Answer

Using jQuery        document  height    amp    window  height   will return the same values     the key is to reset body s padding and margin so that you get no scrolling      lt  --  body       padding  0px      margin  0px      position  relative     -- gt      Hope this helps

User · Answer

As Kyle suggested  you can measure the client browser viewport size without taking into account the size of the scroll bars this way   Sample  Viewport dimensions WITHOUT scroll bars      First you forcibly request the scroll bars to hidden regardless if they will be needed or not     body   css  overflow    hidden        Take your measures      These measures WILL NOT take into account scroll bars dimensions  var heightNoScrollBars     window  height    var widthNoScrollBars     window  width        Set the overflow css property back to it s original value  default is auto     body   css  overflow    auto      Alternatively if you wish to find the dimensions of the client viewport while taking into account the size of the scroll bars  then this sample bellow best suits you   First don t forget to set you body tag to be 100  width and height just to make sure the measurement is accurate    body    width  100      if you wish to measure the width and take into account the horizontal scroll bar  height  100      if you wish to measure the height while taking into account the vertical scroll bar      Sample  Viewport dimensions WITH scroll bars      First you forcibly request the scroll bars to be shown regardless if they will be needed or not     body   css  overflow    scroll        Take your measures      These measures WILL take into account scroll bars dimensions  var heightWithScrollBars     window  height    var widthWithScrollBars     window  width        Set the overflow css property back to it s original value  default is auto     body   css  overflow    auto

[jquery] Get the height and width of the browser viewport without scrollbars using jquery?

Examples related to jquery