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

Thu, 25 Apr 2024 22:52:36 +0900

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

現在のブラウザ表示領域

- 
- 
- 



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桁までの小数点以下の数字を表示

スクリプト

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

解析 on qwerty.work

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

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

現在のブラウザ表示領域

スクリプト