How to get the browser viewport dimensions?
cross-browser, javascript, viewport
Solution
Cross-browser `@media (width)` and `@media (height)` values
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
`window.innerWidth` and `window.innerHeight`
- gets CSS viewport `@media (width)` and `@media (height)` which include scrollbars
- `initial-scale` and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the `@media` values
- zoom may cause values to be 1px off due to native rounding
- `undefined` in IE8-
`document.documentElement.clientWidth` and `.clientHeight`
- equals CSS viewport width minus scrollbar width
- matches `@media (width)` and `@media (height)` when there is no scrollbar
- same as `jQuery(window).width()` which jQuery calls the browser viewport
- available cross-browser
- inaccurate if doctype is missing
Resources
- Live outputs for various dimensions
- verge uses cross-browser viewport techniques
- actual uses `matchMedia` to obtain precise dimensions in any unit
Problem
I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size? Or better yet, the viewport size of the browser with JavaScript? See green area here: