How to get the browser viewport dimensions?
Cross-browser @media (width) and @media (height) valuesÂ
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)const 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-scaleand zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the@mediavalues- zoom may cause values to be 1px off due to native rounding
undefinedin 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
matchMediato obtain precise dimensions in any unit
$(window).width() and $(window).height()
