1

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

在 webkit 浏览器中它通过

window.innerWidth / 内部高度
并且工作正常，但我找不到 Firefox 的相应值。

4

3 回答 3

2

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

在屏幕的右下角放置一个零像素大小的“虚拟”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 上测试。

于 2013-10-09T20:57:23.660 回答
0

window.innerWidth 窗口.innerHeight

这两个适用于所有浏览器

于 2013-09-02T14:01:07.603 回答
0

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

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

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

同样对于高度。

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

于 2015-11-18T12:01:11.123 回答