Firefox手机浏览器中的可视化视口检测 [英] Visual viewport detection in Firefox mobile browser

问题描述

正如主题所说，我需要在Firefox手机浏览器中使用这些缩放感染的视口尺寸（CSS-像素）。如何提取？

在webkit浏览器中，它通过

 window.innerWidth / innerHeight 

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

解决方案

我有同样的问题，并提出了以下解决方案：在屏幕的右下角放置一个零像素大小的dummydiv（使用position：fixed），并通过getBoundingClientRect（）查询它的位置。左/顶部，它给出了可视视口的宽度/高度。

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

 < div id =dummystyle =position：fixed; right：0; bottom：0>< / div> 
< button onclick =alert（
'innerWidth：'+ window.innerWidth +'/'+ 
 document.getElementById（'dummy'）。getBoundingClientRect（）。left 
）;>测试< /按钮> 
  

在浏览器中加载上述网页并按下测试按钮将会将视窗宽度显示为通过window.innerWidth和getBoundingClientRect（）方法查询。

1. 在桌面版Firefox上，两种方法都会产生视觉的宽度
   

2. 在移动的Firefox上，window.innerWidth给出了布局的宽度

/我>视口（这是独立的缩放级别，几乎没有用于我们的目的）。相反，getBoundingClientRect（）方法确实会产生CSS像素中的视觉视口的当前宽度。
$ /

$ b

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




As the subject says, I need these zoom-tainted viewport dimensions (CSS-pixels) in Firefox mobile browser. How do I extract that?

In webkit browsers it goes by

window.innerWidth / innerHeight

and works fine, but I just can't find the corresponding values for Firefox.

解决方案

I had the same problem and came up with the following solution:

Place a zero-pixel size "dummy" div in the bottom right corner of the screen (using "position:fixed") and query its position via getBoundingClientRect().left/top, which gives the width/height of the visual viewport.

Example code (querying only the width):

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

Loading the above web page in a browser and pressing the "Test" button will display the viewport widths as queried via the window.innerWidth and the getBoundingClientRect() methods.

1. On desktop Firefox, both methods yield the width of the visual viewport in CSS pixels, which depends on the window width and zoom level.

2. On mobile Firefox, window.innerWidth gives the width of the layout viewport (which is independent of zoom level, and pretty much useless for our purpose). On the contrary, the getBoundingClientRect() method does indeed yield the current width of the visual viewport in CSS pixels.

Tested on Desktop FF ver 19.0.2 and on Firefox mobile ver 24.0.

这篇关于Firefox手机浏览器中的可视化视口检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！