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.
On desktop Firefox, both methods yield the width of the visual viewport in CSS pixels, which depends on the window width and zoom level.
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.
window.innerWidth
window.innerHeight
these two work for all browsers
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.)
Related
So the definition of innerWidth according to W3C is:
The innerWidth attribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.
Does this mean that if something inside the document generates overflow then window.innerWidth can be affected? I have this very simple sandbox (which is only a div causing overflow) and this seems to be true when using the sandbox preview with Chrome device tools (Chromium 84) and in mobile (I only tested Android), but in desktop browsers the value doesn't seem to be affected. Why? Is this the intended behavior?.
Note in the image that the width in the tools don't match the logged width:
No, overflowed content cannot affect window.innerWidth. What you are seeing is an issue with chrome dev tools. The window is still 1600px even though chrome is artificially resizing to a mobile device size.
I was trying to get the screen available height (not include task bars and etc) in Javascript. screen.availHeight in Mac OS/Linux gives me exactly what I need. However, in Windows 10 screen.availHeight returns longer than I expect. It seems to include the length of task bars as well.
How can I get the maximum available height not including the task bars and etc in Windows 10?
So I'm pretty sure using jQuery is the solution!
This code will work quite fine:
$(window).height(); // browser viewport height
Also I'm sure this is not problem of Windows, it's sounds like some kind of browser problem :)
Have you tried to use document.height also? Is this not working either?
$(document).height(); // HTML document height
Try this one:
window.innerHeight;
If you want the height of the window you can do window.innerHeight
If you want the height of the screen you can do window.screen.height
I have a monitor with 1920x1080 resolution for my laptop and a Surface Pro 3 with 1920x1280 resolution. I am developing a web page designed for full-screen viewing on 1920x1080 and 1920x1280 displays.
I have confirmed the settings for each display (see below).
Why am I getting 8xx instead of 1280? How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?
1920x1080 monitor (on Windows 8):
1920x1280 (Surface Pro 3) display (on Windows 10):
Using $(window).height() on my 1920x1080 monitor, I get the following:
That works for me.
However, using suggestions from this question for my 1920x1280 (Surface Pro 3) display...
Using suggestions from the accepted answer.
Using $(window).height():
Using $(document).height():
Using screen.height:
Using the suggestion from this answer:
Using the suggestion from this answer:
Using the suggestion from this answer:
Using the suggestion from this answer and this answer and this answer:
Using this suggestion from this answer:
This suggestion is a self-recommendation of a plugin. I will pass on this for now.
This suggestion uses a Coffee solution. I'll stick to JavaScript and jQuery for now.
Using this suggestion from this answer (which regurgitates a few other answers):
This suggestion requires an external library. I will pass on this for now.
Using the suggestion from this answer:
This suggestion was incorporated into a few other answers above.
It seems that your Surface Pro 3 uses an operating system wide zoom factor of 150%. Due to this the browser returns width 1280 and height 853 (as 1280 * 1.5 = 1920 and 853 * 1.5 = 1280). Switch Windows' zoom factor to 100% in Control Panel and your browser will return width and height as expected.
1) How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?
Have you tried
window.outerHeight
yet?
All I see in your test cases is the innerHeight.
That's only showing you what the browser will render(pixels will be zoomed, etc.. decreasing the available width you actually have)
2) Why am i getting 8xx instead of 1280?
Basically, browsers will zoom text/images/ etc.. to give a consistent experience across several resolutions.
Even though you are building it for a 1280 screen, you might only have 8xx pixels to your availability.
For more information about the pixeling I advice you read:
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Here is a solution that worked for me in Firefox, Chrome, IE11, and Edge. I don't have a Mac to test on but this should work there too. You need to factor in the device pixel ratio. Here is an example (JSBin):
var screenHeight = window.devicePixelRatio * screen.height;
This will give you the screen dimensions regardless of DPI of the device.
An important thing to note is that innerHeight (size of window without browser UI) and outerHeight (size of window with browser UI) are relative to the browser window. You should use those instead of screen.height if you want to know the size of the browser window.
In the browser, you deal with the abstraction of CSS pixels, not with physical pixels. The size reported to you is most likely correct (unless there is a weird browser bug at play), so the height of the window is 853 CSS pixels.
My advice would be to work with that size. Adjust your layout with media queries etc. Don't try to second-guess the browser; don't optimize for hardware specifics which browser vendors, and web standards, are actively trying to hide from you.
(I'll try to expand this answer later on, if I have the time. A proper explanation of the concepts is the length of a blog post.)
I googled this and got a quirksmode site that gives you your screen size. Pulling up the console I see that screen.width and screen.height are directly available from the window object.
I want to do the detection in pure JavaScript to get started. Can I use this property across all devices and browsers - mobile, tablet, PC and Chrome, Safari, IE, Firefox.
I don't care about the view port changing due to re-sizing etc. Just the actual size of the screen which does not change.
I was hoping there was a single property I could check across devices and browsers.
Here is some general info by wikipedia on responsive web design.
Take a look at Get the device width in javascript
Media Queries work in js too:
if (window.matchMedia('screen and (max-width: 768px)').matches) {}
Another way would be:
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
screen.width is the property your are looking for.
This is what worked for me after long hunch.
These attributes below provide responsive sizes based on new tab size.
window.innerWidth
window.innerHeight
I have a problem with retrieving the current page document width from Mozilla Firefox. While the rest of the browsers report the correct width of the document, Firefox reports a smaller one (example: at screen resolution of 1920x1080 IE, Chrome and Safari reports 1920 while Firefox reports 1903).
I use document width in $(document).ready(function() { ... }); to reposition a div element. Funny this is that after using alert() inside this function, the element reposition correctly, though the document size is still smaller than other browsers.
As Salman already noted in the comments, this difference comes from the scroll bar. Depending on the browser (and probably also on whether quirks mode is enabled), the scrollbar might be considered "outside" the document (in which case its width won't be added to the document width) or part of the <html> element (then its width will be added to the document width). So document.documentElement.offsetWidth will return inconsistent results - sometimes with the scrollbar, sometimes without it. document.body.offsetWidth on the other hand seems consistent across browsers - scrollbar width isn't included.
If what you want to learn is viewport width, regardless of the contents, then window.innerWidth might be a better choice. I tested in Firefox, Chrome and MSIE 9.0 - it returns the full screen width for maximized windows in all of them.