Cross-browser compatibility still remains an issue with many features, CSS viewport size is no exception. For example, WebKit browsers change the size of their CSS viewport when scroll bars are visible, while most other browsers do not. Since window.innerWidth remains constant regardless of the scroll bar state, it’s not a good option for use with Chrome or Safari. Additionally, Internet Explorer 6, 7, and 8 do not support window.innerWidth. On the other hand, document.documentElement.clientWidth can change based on the scroll bar state and therefore is not a good option for Internet Explorer, Firefox, or Opera.
window.innerWidth vs. documentElement.clientWidth
If you are using window.innerWidth to get the size the viewport irrespective to scroll bar state, then great. Or, if you are using documentElement.clientWidth to get what the current usable viewport is, then awesome. However, if you are using one or the other thinking it will give you the actual CSS, then it’s probably time to start updating your sites.
The following table compares the potential values of innerWidth and clientWidth to the actual CSS viewport width.
The following table shows a more detailed comparison on how browsers treat the CSS viewport when scroll bars are visible.
|IE 6, 7, 8||NA||484||undefined||484|
|FF 17 Win||500||500||500||483|
|FF 17 Mac||500||500||500||485|
|Chrome 24 Win||483||483||500||483|
|Safari 5 Win||483||483||500||483|
|Opera 12 Win||500||500||500||483|
|Opera 12 Mac||500||500||500||485|
Is there a good solution?
I found that if scroll bars are not visible, then window.innerWidth and documentElement.clientWidth will both return the correct value. However, when scroll bars are visible some additional detection is required. The current version of the script injects a CSS media query to test if documentElement.clientWidth is equal to the current CSS viewport size. If they are equal, it uses the value, however if they are not equal, it falls back to use window.innerWidth. There are currently no known unsupported browsers and should be ready for production use. Check out the project homepage to download the uncompressed or minified versions of the script. Enjoy!
Do you know what your viewport width is? Test your knowledge.
Also, checkout my ViewportTester bookmarklet that makes viewing your viewport size easy.
And yes, I’m aware that I posted a similar script in an earlier post but thought it deserved a bit more of an explanation.