{"id":1477,"date":"2015-03-23T11:19:34","date_gmt":"2015-03-23T10:19:34","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=1477"},"modified":"2015-03-23T13:18:13","modified_gmt":"2015-03-23T12:18:13","slug":"get-window-viewport-document-height-and-width-javascript","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2015\/03\/23\/get-window-viewport-document-height-and-width-javascript\/","title":{"rendered":"Get window\/viewport\/document height and width [JavaScript]"},"content":{"rendered":"<p>Via <a href=\"http:\/\/andylangton.co.uk\/blog\/development\/get-viewport-size-width-and-height-javascript\">andylangton<\/a> and <a href=\"http:\/\/james.padolsey.com\/snippets\/get-document-height-cross-browser\/\">james.padolsey<\/a> we can find the viewport and document height\/width in JavaScript:<\/p>\n<pre class=\"brush:javascript\">\r\nfunction getPageSize() {\r\n  var vw = {width:0, height:0};\r\n  var doc = {width:0, height:0};\r\n  var w=window, d=document, dde=d.documentElement, db=d.getElementsByTagName('body')[0];\r\n  \r\n  \/\/ viewport size\r\n  vw.width  = w.innerWidth||dde.clientWidth||db.clientWidth;\r\n  vw.height = w.innerHeight||dde.clientHeight||db.clientHeight;\r\n\r\n  \/\/ document size\r\n  doc.width  = Math.max(db.scrollWidth, dde.scrollWidth, db.offsetWidth, dde.offsetWidth, db.clientWidth, dde.clientWidth);\r\n  doc.height = Math.max(db.scrollHeight, dde.scrollHeight, db.offsetHeight, dde.offsetHeight, db.clientHeight, dde.clientHeight);\r\n  \r\n  \/\/ if IE8 there is a bug with 4px\r\n  if (!!(document.all &#038;& document.querySelector &#038;& !document.addEventListener) &#038;& (vw.width+4 == doc.width) &#038;& (vw.height+4 == doc.height)) {\r\n    vw.width=doc.width;\r\n    vw.height=doc.height;\r\n  }\r\n  \r\n   return {vw:vw, doc:doc};\r\n}\r\n\r\ngetPageSize(); \/\/ -> {vw: { width:xxx, height:xxx }, doc: { width:xxx, height:xxx } }\r\n<\/pre>\n<p>It should work for IE8-IE10 and all modern browsers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Via andylangton and james.padolsey we can find the viewport and document height\/width in JavaScript: function getPageSize() { var vw = {width:0, height:0}; var doc = {width:0, height:0}; var w=window, d=document, dde=d.documentElement, db=d.getElementsByTagName(&#8216;body&#8217;)[0]; \/\/ viewport size vw.width = w.innerWidth||dde.clientWidth||db.clientWidth; vw.height = w.innerHeight||dde.clientHeight||db.clientHeight; \/\/ document size doc.width = Math.max(db.scrollWidth, dde.scrollWidth, db.offsetWidth, dde.offsetWidth, db.clientWidth, dde.clientWidth); doc.height = Math.max(db.scrollHeight, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[15,16,11,33],"tags":[153,24,154,151,158],"class_list":["post-1477","post","type-post","status-publish","format-standard","hentry","category-astuce","category-navigateur","category-niveau-debutant","category-programmation","tag-astuce","tag-javascript","tag-navigateur","tag-niveau-debutant","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1477"}],"version-history":[{"count":7,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1477\/revisions"}],"predecessor-version":[{"id":1486,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1477\/revisions\/1486"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}