Using jQuery To Get Size of Viewport

Question

How do I use jQuery to determine the size of the browser viewport  and to redetect this if the page is resized  I need to make an IFRAME size into this space  coming in a little on each margin    For those who don t know  the browser viewport is not the size of the document page  It is the visible size of your window before the scroll

User · Answer

function showViewPortSize display        if  display            var height   window innerHeight          var width   window innerWidth          jQuery  body                prepend   lt div id  viewportsize  style  z-index 9999 position fixed bottom 0px left 0px color  fff background  000 padding 10px  gt Height      height     lt br gt Width      width     lt  div gt             jQuery window               resize function                     height   window innerHeight                  width   window innerWidth                  jQuery   viewportsize                        html  Height      height     lt br gt Width      width                             document       ready function             showViewPortSize true

User · Answer

1  Response to the main question  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 HTML 5    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   2  An ADDITIONAL tip  note aside  Moreover  if you are doing a script  you can invent tests to help programmers in using your libraries  let me invent a couple         document  ready function            if typeof     undefined             alert  PROGRAMMER S Error  you haven t called JQuery library            else if  typeof   ui   undefined             alert  PROGRAMMER S Error  you haven t installed the UI 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                          EDIT  about the part 2   An ADDITIONAL tip  note aside    Machiel  in yesterday s comment  2014-09-04   was UTTERLY right  the check of the   can not be inside the ready event of Jquery  because we are  as he pointed out  assuming   is already defined  THANKS FOR POINTING THAT OUT  and do please the rest of you readers correct this  if you used it in your scripts  My suggestion is  in your libraries put an  install script    function which initializes the library  put any reference to   inside such init function  including the declaration of ready    and AT THE BEGINNING of such   install script    function   check if the   is defined  but make everything independent of JQuery  so your library can  diagnose itself  when JQuery is not yet defined  I prefer this method rather than forcing the automatic creation of a JQuery bringing it from a CDN  Those are tiny notes aside for helping out other programmers  I think that people who make libraries must be richer in the feedback to potential programmer s mistakes  For example  Google Apis need an aside manual to understand the error messages  That s absurd  to need external documentation for some tiny mistakes that don t need you to go and search a manual or a specification  The library must be SELF-DOCUMENTED  I write code even taking care of the mistakes I might commit even six months from now  and it still tries to be a clean and not-repetitive code  already-written-to-prevent-future-developer-mistakes

User · Answer

You can try viewport units  CSS3    div      height  95vh     width  95vw       Browser support

User · Answer

You can use   window  resize   to detect if the viewport is resized   jQuery does not have any function to consistently detect the correctly width and height of the viewport 1  when there is a scroll bar present   I found a solution that uses the Modernizr library and specifically the mq function which opens media queries for javascript   Here is my solution      A function for detecting the viewport minimum width     You could use a similar function for minimum height if you wish  var min width  if  Modernizr mq   min-width  0px              Browsers that support media queries     min width   function  width            return Modernizr mq   min-width      width                  else          Fallback for browsers that does not support media queries     min width   function  width            return   window  width    gt   width            var resize   function         if  min width  768px                 Do some magic             window  resize resize   resize      My answer will probably not help resizing a iframe to 100  viewport width with a margin on each side  but I hope it will provide solace for webdevelopers frustrated with browser incoherence of javascript viewport width and height calculation   Maybe this could help with regards to the iframe      iframe   css  width    100    wrap   lt div style  margin 2em  gt  lt  div gt        1  You can use   window  width   and   window  height   to get a number which will be correct in some browsers  but incorrect in others  In those browsers you can try to use window innerWidth and window innerHeight to get the correct width and height  but i would advice against this method because it would rely on user agent sniffing   Usually the different browsers are inconsistent about whether or not they include the scrollbar as part of the window width and height   Note  Both   window  width   and window innerWidth vary between operating systems using the same browser  See  https   github com eddiemachado bones issues 468 issuecomment-23626238

User · Answer

To get size of viewport on load and on resize  based on SimaWB response    function getViewport         var viewportWidth     window  width        var viewportHeight     window  height            viewport   html  Viewport    viewportWidth   x   viewportHeight   px       getViewport       window  resize function         getViewport

User · Answer

Please note that CSS3 viewport units  vh vw  wouldn t play well on iOS When you scroll the page  viewport size is somehow recalculated and your size of element which uses viewport units also increases  So  actually some javascript is required

User · Answer

To get the width and height of the viewport   var viewportWidth     window  width    var viewportHeight     window  height      resize event of the page     window  resize function

[jquery] Using jQuery To Get Size of Viewport

Examples related to jquery

Examples related to resize

Examples related to size

Examples related to viewport