Firefox 移动浏览器中的视觉视口检测答案

【问题标题】：Visual viewport detection in Firefox mobile browserFirefox 移动浏览器中的视觉视口检测
【发布时间】：2013-09-02 13:58:41
【问题描述】：

正如主题所说，我需要 Firefox 移动浏览器中的这些缩放污染的视口尺寸（CSS 像素）。如何提取它？

在 webkit 浏览器中它通过

window.innerWidth / innerHeight

并且工作正常，但我找不到 Firefox 的相应值。

【问题讨论】：

标签： javascript firefox mobile viewport

【解决方案1】：

我遇到了同样的问题并想出了以下解决方案：

在屏幕的右下角放置一个零像素大小的“虚拟”div（使用“position:fixed”）并通过getBoundingClientRect().left/top查询它的位置，它给出了宽度/高度视觉视口。

示例代码（只查询宽度）：

<div id="dummy" style="position:fixed;right:0;bottom:0"></div>
<button onclick="alert(
    'innerWidth: ' + window.innerWidth + ' / ' + 
    document.getElementById('dummy').getBoundingClientRect().left
);">Test</button>

在浏览器中加载上述网页并按下“测试”按钮将显示通过 window.innerWidth 和 getBoundingClientRect() 方法查询的视口宽度。

在桌面版 Firefox 上，这两种方法都以 CSS 像素为单位生成可视视口的宽度，这取决于窗口宽度和缩放级别。
在移动 Firefox 上，window.innerWidth 给出了 layout 视口的宽度（与缩放级别无关，对我们的目的几乎没有用处）。相反，getBoundingClientRect() 方法确实以 CSS 像素为单位生成 visual 视口的当前宽度。

在桌面版 FF 19.0.2 版和 Firefox 移动版 24.0 上测试。

【讨论】：

【解决方案2】：

window.innerWidth window.innerHeight

这两个适用于所有浏览器

【讨论】：

它“有效”，但它没有向我显示 visual viewport 尺寸，仅显示布局视口尺寸。同样，这是关于 Firefox mobile 的问题，在这方面它的行为与 Webkit 浏览器不同。
视觉？包括滚动条等？

【解决方案3】：

使用jQuery.documentSize（我写的）很容易。您可以使用它查询布局视口的大小和可视视口的大小。它还处理影响旧版本 Firefox 中的innerWidth、innerHeight 实现的错误。

尽管有名字，但它是用 vanilla Javascript 编写的，你也可以使用它without jQuery。

visualWidth = $.windowWidth( { viewport: "visual" } );
layoutWidth = $.windowWidth( { viewport: "layout" } );

身高也是如此。

（这个问题真的很老了，参与者可能不会在意，但至少它促使我用 Firefox for Android 测试 jQuery.documentSize，我还没有做过。按预期工作。）

【讨论】：