windowのサイズを計測するページをつくる 🪟

以前、まったく同じものをつくった気がしなくもないのですが、見当たらなかったので作成しました。

develop.kimizuka.org

FullScreenAPI に対応しているブラウザであれば、全画面にすることもできます。

ソースコード（抜粋）

index.js

handleResize();

window.addEventListener('resize', handleResize);

document.querySelector('button').addEventListener('click', () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.querySelector('div').requestFullscreen().then(() => {
      handleResize();
    });
  }
});

function handleResize() {
  document.getElementById('screen-width').innerText = window.screen.width;
  document.getElementById('screen-height').innerText = window.screen.height;
  document.getElementById('screen-avail-width').innerText = window.screen.availWidth;
  document.getElementById('screen-avail-height').innerText = window.screen.availHeight;
  document.getElementById('inner-width').innerText = window.innerWidth;
  document.getElementById('inner-height').innerText = window.innerHeight;
}