“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)
|