“Layout viewport” width: how big is a width:100% element?
jQuery(window).width()
document.documentElement.clientWidth
document.body.clientWidth
document.getElementById("staticDiv").clientWidth
document.getElementById("static100Div").clientWidth
document.getElementById("fixedDiv").clientWidth
“Visual viewport” width
window.innerWidth
window.outerWidth
Document width: scrolling width of document
jQuery(document).width()
document.width
other
// scrollbar width for overflow:scroll divs
var outerDiv = document.createElement('div'); outerDiv.style.width = outerDiv.style.height = '500px'; // enough for all the scrollbars var div = outerDiv; for (var i = 0; i < 10; ++i) { var child = document.createElement('div'); child.style.overflowY = 'scroll'; div.appendChild(child); div = child; } document.body.appendChild(outerDiv); var outerDivWidth = outerDiv.clientWidth; var innerDivWidth = div.clientWidth; var scrollbarWidthCss = (outerDivWidth - innerDivWidth)/10; document.body.removeChild(outerDiv); return scrollbarWidthCss;
// measure @media(min-device-width)
DetectZoom.mediaQueryBinarySearch("min-device-width", "px", 0, 6000, 20, .0001)
// measure @media(min-width)
DetectZoom.mediaQueryBinarySearch("min-width", "px", 0, 6000, 20, .0001)
window.devicePixelRatio
screen.deviceXDPI
screen.systemXDPI
screen.logicalXDPI
// measure @media(min--moz-device-pixel-ratio)
DetectZoom.mediaQueryBinarySearch("min--moz-device-pixel-ratio", "", 0, 10, 20, .0001)
staticDiv: just a div
static100Div: div with width:100%
fixedDiv: div with position:fixed;width:100%