Live
x
<div class="content"> <h2> window.innerWidth × window.innerHeight:<br> <span id="innerWidth"></span> × <span id="innerHeight"></span> </h2> <p>— returns window dimensions including scrollbars.</p> <br><br> <h2> document.documentElement.clientWidth × document.documentElement.clientHeight:<br> <span id="clientWidth"></span> × <span id="clientHeight"></span> </h2> <p>— returns document dimensions (limited by window) without scrollbars.</p> <br><br> </div>
Live
xxxxxxxxxx14
@-ms-viewport { width: device-width; }body { background: #ddd url(https://www.oocities.org/dtmcbride/tech/web-dev/IMGS/ruler-vh.gif) top left no-repeat; }.content { margin: 2em; padding: 1em 2em;}h2 { margin-bottom: 0;}
Live
xxxxxxxxxx18
function getViewports() { document.getElementById("innerWidth").innerHTML = window.innerWidth; document.getElementById("innerHeight").innerHTML = window.innerHeight; document.getElementById("clientWidth").innerHTML = document.documentElement.clientWidth; document.getElementById("clientHeight").innerHTML = document.documentElement.clientHeight; }window.addEventListener('resize', getViewports);window.addEventListener('orientationchange', getViewports);getViewports();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.