javascript - javascript中的视口大小

Question

我知道这已经被问了一百万次了，有一百万个答案都是一样的，都是错误的。我一直在努力在 javascript 中获取视口大小，以便它可以在任何地方工作。

我已经让它在所有浏览器上工作，除了 iOS 上的 Safari。我已经在几部 iPhone 上使用 iOS 10、11、12 进行了测试。这是迄今为止我遇到的最强大的方法的一个版本：

function getViewportSize() {
    return {
        width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        height: Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
    };
}

但是，document.documentElement.clientHeight在window.innerHeightiOS 上，两者都返回文档的高度，而不是视口的高度。因此，如果文件较长，他们会退回。只要页面短于视口，它们（两者）都会返回视口高度。简而言之，两者似乎都可以Max(viewport height, document height)。

我创建了一个笔，它将显示每个对象的每个宽度/高度属性，这有点明智：https ://codepen.io/thany-madeinjapan/pen/xBQwNX只需添加更多文本，您就会看到提到的两个属性会很高兴地随着文档增长，即它们不反映视口高度。宽度有同样的问题 - 禁用自动换行以查看它的发生。问题是：获取视口宽度/高度的最终方法是什么？

标签： javascriptiosviewport