如何在Webview中获取缩放视口的宽度和高度？

Question

我正在使用$(window).width()和$(window).height()来获取网页视图的宽度和高度，但这些值总是返回相同的数值，而不是整个网页视图的真实宽度和高度。

我需要获取用户当前所看到的视口（即浏览器可见区域）的宽度和高度，以便在缩放时，视口的宽度和高度会变小。

我需要这样做是为了将一个div元素居中于用户所看到的视口中。

- has19

Answer 1

我不太擅长JavaScript，但我曾经遇到过这个问题。我记得与目标内宽有关。有时，根据您的做法，您还需要考虑滚动条。

我在这里找到了这个链接：为什么窗口宽度小于媒体查询中设置的视口宽度 类似的问题。

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' ] };
}

var vpWidth = viewport().width;

- Patrick

---

它可以工作，谢谢。不过如果您能解释一下代码的工作原理就更好了。 - has19

我很高兴它能够工作。哈哈，我不知道代码是如何工作的。我只是擅长找东西。 - Patrick

哈哈，不错。现在我又有一个问题了，如何获取视口相对于浏览器整个宽度和高度的X和Y位置呢 :) - has19

什么的x和y位置？像这样吗？http://callmenick.com/post/cross-browser-calculation-of-x-y-position - Patrick

+1 谢谢，实际上你给的链接解决了我的所有问题，我甚至不再需要视口了。 - has19