layout | assets | notables |
---|---|---|
post |
/assets |
true |
Window inner dims :
Window client dims:
Device pixel ratio:
Content width :
Calc'd width :
<style>
#calc-div { width: 740px; }
@media (max-width: 800px) {
#calc-div { width: calc(100vw - 30px); }
}
</style>
<script>
function reportWindowSize() {
document.querySelector('#inner').textContent = window.innerWidth + ' x ' + window.innerHeight;
document.querySelector('#client').textContent = document.documentElement.clientWidth + ' x ' + document.documentElement.clientHeight;
document.querySelector('#dpr').textContent = window.devicePixelRatio;
document.querySelector('#cow').textContent = document.querySelector('#test-div').offsetWidth + 'px';
document.querySelector('#caw').textContent = document.querySelector('#calc-div').offsetWidth + 'px';
}
reportWindowSize();
window.onresize = reportWindowSize;
</script>