如何获得浏览器视口尺寸?

我想让我的访问者能够看到高质量的图像，有什么方法可以检测窗口的大小吗?

或者更好的是，JavaScript浏览器的视口大小?见此处绿色区域:

当前回答

你可以用窗户。innerWidth和window。innerHeight属性。

2009-08-08 06:39:12

其他回答

我找到了一个跨浏览器的方法:

2014-05-30 09:07:01

jQuery维函数

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

2009-08-08 06:01:22

这是我做的方式，我在IE 8 -> 10, FF 35, Chrome 40中尝试过，它将在所有现代浏览器(作为窗口)中工作得非常流畅。innerWidth是定义的)，在IE 8(没有window.innerWidth)，它工作顺利，任何问题(如闪烁，因为溢出:“隐藏”)，请报告它。我不是真的对视口高度感兴趣，因为我做这个函数只是为了解决一些响应工具，但它可能会被实现。希望它能有所帮助，我感谢评论和建议。

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}

2015-02-24 11:57:56

用于动态检测尺寸

你可以这样做在本地，没有Jquery或额外的

console.log('height默认值:'+window.visualViewport.height) console.log('width default:'+window.visualViewport.width) window.addEventListener(“调整”,(e) = > { console.log(' width: ${e.t target. visualviewport .width}px '); console.log(' height: ${e.t target. visualviewport .height}px '); })；

2021-10-11 18:18:26

如果你不使用jQuery，它会变得很难看。下面是一个可以在所有新浏览器上运行的代码片段。在IE的Quirks模式和标准模式下，行为是不同的。这就搞定了。

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;

2009-08-08 06:20:10

如何获得浏览器视口尺寸?

推荐文章

最新文章

标签