用于动态检测尺寸

你可以这样做在本地，没有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 '); })；

窗户和窗户是有区别的。innerHeight和document.documentElement.clientHeight。第一个包括水平滚动条的高度。

如果您正在寻找非jquery解决方案，在移动设备上给出正确的虚拟像素值，并且您认为普通窗口。innerHeight或document.documentElement.clientHeight可以解决您的问题，请先研究这个链接:https://tripleodeon.com/assets/2011/12/table.html

开发人员已经做了很好的测试，揭示了这个问题:你可能会在Android/iOS、横向/纵向、正常/高密度显示中得到意想不到的值。

我目前的答案还不是silver bullet (//todo)，而是对那些打算从这个线程快速复制粘贴任何给定解决方案到生产代码的人的警告。

我在手机上寻找虚拟像素的页面宽度，我发现唯一的工作代码是window.outerWidth(出乎意料!)当我有时间的时候，我将检查这个表的正确解决方案，给出不包括导航栏的高度。

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

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

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

符合W3C标准的解决方案是创建一个透明的div(例如使用JavaScript动态创建)，将其宽度和高度设置为100vw/100vh (Viewport单位)，然后获取其offsetWidth和offsetHeight。之后，可以再次删除该元素。这在较旧的浏览器中行不通，因为视口单元相对较新，但如果你不关心它们，而是关心(即将到来的)标准，你肯定可以这样做:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

当然，你也可以设置objNode.style.position = "fixed"，然后使用100%作为宽度/高度——这应该有同样的效果，并在一定程度上提高兼容性。另外，一般来说，将位置设置为固定可能是一个好主意，因为否则div将是不可见的，但会消耗一些空间，这将导致出现滚动条等。

我在O'Reilly的《JavaScript: The definitive Guide》第6版中找到了一个明确的答案，第391页:

这个解决方案即使在Quirks模式下也能工作，而ryanve和ScottEvernden目前的解决方案则不能。

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

除了我想知道为什么行if (document.compatMode == "CSS1Compat")不是if (d.compatMode == "CSS1Compat")，一切看起来都很好。