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

Question

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

或者更好的是，使用JavaScript的浏览器的视口大小？在此处查看绿色区域：

Answer 1

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

@media (height)

[@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)可能导致移动值错误地缩小到PPK所称的initial-scale，并且小于variations值
• 缩放可能会由于原始舍入而使值偏离1px
• [IE8中的visual viewport-

[@media和undefined

• 等于CSS视口宽度减滚动条宽度
• 当有no滚动条时，匹配document.documentElement.clientWidth和.clientHeight
• [@media (width) @media (height)其中same as 调用浏览器视口
• jQuery(window).width()
• jQuery

资源

• available cross-browser
• [inaccurate if doctype is missing使用跨浏览器视口技术
• [Live outputs for various dimensions使用verge获得任何单位的精确尺寸

Answer 2

如果您正在寻找非jQuery解决方案

可以在移动设备上的虚拟像素中提供正确的值

Answer 3

符合W3C标准的解决方案是创建一个透明的div（例如，使用JavaScript动态创建），将其宽度和高度设置为100vw / 100vh（视口单位），然后获取其offsetWidth和offsetHeight。之后，可以再次删除该元素。这在较旧的浏览器中将不起作用，因为视口单位是相对较新的，但是如果您不关心它们，而只关心（即将成为）标准，则可以肯定采用这种方式：

Answer 4

这是我做的方法，我在IE 8中尝试过-> 10，FF 35，Chrome 40，它将在所有现代浏览器（定义window.innerWidth）和IE 8（没有window.innerWidth）也可以顺利运行，任何问题（例如由于溢出而闪烁：“隐藏”），请报告。我对视口高度并不是很感兴趣，因为我做了此功能只是为了解决一些响应工具，但可以实现。希望能有所帮助，我感谢您的评论和建议。

Answer 5

actual

[matchMedia和jQuery dimension functions

Answer 6

您可以使用$(window).width()和$(window).height()属性。

<<

Answer 7

如果您不使用jQuery，它将变得难看。这是一个适用于所有新浏览器的代码段。在IE的Quirks模式和标准模式下，行为是不同的。这样就可以了。

Answer 8

[我知道这是一个可以接受的答案，但是我遇到了window.innerHeight无法正常工作的情况，因为iPhone（至少是我的）返回了980，而不是320，所以我使用了

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

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

。我在现有网站上工作，被“响应”，需要迫使更大的浏览器使用不同的元视口。

Answer 9

我能够在JavaScript：O'Reilly出版的第6版《权威指南》中找到明确的答案。 391：

Answer 10

我查看并发现了一种跨浏览器的方式：

Answer 11

此代码来自

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}

Answer 12

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

和console.log('viewport width'+viewport().width);之间存在差异。第一个包括水平滚动条的高度。