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
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}
However, it is not even possible to get the viewport information in all browsers (e.g. IE6 in quirks mode). But the above script should do a good job :-)
These days, for screen size you can use the screen object:
window.screen.height;
window.screen.width;
Legacy
You can get the size of the window or document with jQuery:
// Size of browser viewport.
$(window).height();
$(window).width();
// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();
Best Answer
Cross-browser
@media (width)
and@media (height)
valuesÂwindow.innerWidth
andwindow.innerHeight
@media (width)
and@media (height)
which include scrollbarsinitial-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
valuesundefined
in IE8-document.documentElement.clientWidth
and.clientHeight
@media (width)
and@media (height)
when there is no scrollbarjQuery(window).width()
which jQuery calls the browser viewportResources
matchMedia
to obtain precise dimensions in any unit