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

Question

正如主题所说，我需要在Firefox移动浏览器中使用这些受缩放影响的视口尺寸（CSS像素）。我该如何提取？

在webkit浏览器中，它按

window.innerWidth/innerHeight

运行，运行良好，但我就是找不到Firefox的相应值。

Answer 1

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

在屏幕的右下角放置一个零像素大小的"dummy"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（）方法查询的视口宽度。

1. 在桌面Firefox上，这两种方法都以CSS像素为单位产生视觉视口的宽度，这取决于窗口宽度和缩放级别。

2. 在移动Firefox上，window.innerWidth提供布局视口的宽度（这与缩放级别无关，对我们的目的几乎没有用处）。相反，getBoundingClientRect（）方法确实产生了视觉视口的当前宽度（以CSS像素为单位）。

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

Answer 2

window.innerWidthwindow.innerHeight

这两个适用于所有浏览器

Answer 3

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

尽管有这个名字，但它是用香草Javascript编写的，您也可以在没有jQuery的情况下使用它。

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

高度也是如此。

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