CODEWITHSUNDEEP
javascriptjqueryfirefox
Scarpelius
Scarpelius

Reputation: 75

Document width calculated via Javascript is different in Firefox compared to other browsers

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.

Upvotes: 1

Views: 1971

Answers (1)

Wladimir Palant
Wladimir Palant

Reputation: 57691

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.

Upvotes: 1

Related Questions