Visual viewport detection in Firefox mobile browser

Question

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.

Answer 1

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.

Answer 2

window.innerWidth window.innerHeight

these two work for all browsers

Answer 3

This is easy with jQuery.documentSize (which I wrote). You can query the size of the layout viewport and the size of the visual viewport with it. It also handles the bug which affects the innerWidth, innerHeight implementations in older versions of Firefox.

Despite the name, it is written in vanilla Javascript, and you can use it without jQuery, too.

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

Likewise for height.

(This question is really old, and the participants probably won't care, but at least it has prompted me to test jQuery.documentSize with Firefox for Android, which I hadn't done yet. Works as expected.)