Get the browser viewport dimensions with JavaScript

 

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:

Cross-browser @media (width) and @media (height) values 

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidth and .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

    • jQuery dimension functions

    $(window).width() and $(window).height()

    You can use the window.innerWidth and window.innerHeight properties.

    innerHeight vs outerHeight

    链接地址: http://www.djcxy.com/p/51882.html

    上一篇: PHP获取浏览器：混淆输出

    下一篇: 使用JavaScript获取浏览器视口尺寸