使用JavaScript获取浏览器视口尺寸

 

我想为我的访问者提供以高质量查看图像的能力，有什么方法可以检测窗口大小？

或者更好的是，JavaScript的浏览器的视口大小？ 在这里看到绿色区域：

跨浏览器@media (width)和@media (height)值 

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

window.innerWidth和.innerHeight

  • 获取包含滚动条的CSS viewport @media (width)和@media (height)
  • initial-scale和缩放变化可能会导致移动值错误地缩小到PPK所称的视觉视口，并小于@media值
  • 由于原生舍入，缩放可能会导致值为1px
  • 在IE8中undefined -

    • document.documentElement.clientWidth和.clientHeight

  • 等于CSS视口宽度减去滚动条宽度
  • 当没有滚动条时匹配@media (width)和@media (height)
  • 与jQuery调用浏览器视口的jQuery(window).width()相同
  • 可用跨浏览器
  • 如果缺少文档类型，则不准确

    • 资源

  • 各种尺寸的实时输出
  • 边缘使用跨浏览器视口技术
  • 实际使用matchMedia来获取任何单位的精确尺寸

    • jQuery维度函数

    $(window).width()和$(window).height()

    您可以使用window.innerWidth和window.innerHeight属性。

    innerHeight vs outerHeight

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

    上一篇: Get the browser viewport dimensions with JavaScript

    下一篇: Mobile Safari $(window).height() URL bar discrepancy