【JS】ブラウザの表示領域を縦横比を計算

ブラウザ表示領域のサイズと縦横比

現在のブラウザ表示領域

スクリプト

<h2>ブラウザ表示領域のサイズと縦横比</h2>
  <ul>
    <li id="size"></li>
    <li id="aspectRatio"></li>
    <li id="aspectRatioFraction"></li>
  </ul>

 <script>
  var width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
  var height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
  var aspectRatio = width + ":" + height;
  var aspectRatioFraction = width / height;

  document.getElementById("size").textContent = "Width: " + width + ", Height: " + height;
  document.getElementById("aspectRatio").textContent = "Aspect Ratio (width:height): " + width + ":" + height;
  document.getElementById("aspectRatioFraction").textContent = "Aspect Ratio (width/height): " + aspectRatioFraction.toFixed(2); // 2桁までの小数点以下の数字を表示
 </script>
PAGETOP