javascript - 无论您使用的是什么设备或屏幕尺寸，如何使 svg 高度与屏幕高度匹配

Question

无论平台如何，我都需要一个始终匹配屏幕高度的 svg。我在 css 中选择 svg 并将高度设置为 100% 或 height: 100vh 或 min-height:100vh 以及大约 10 个其他组合。但是当我在设备工具栏中摆弄它时，我总能找到它不适用的设备。

尤其是 Ipad。

所以我绝望了，使用了“onResize”事件，并使用 javascript 使用 window.innerHeight 将 svg 的高度设置为屏幕的高度。

但显然 onResize 有问题，当它调整屏幕的初始尺寸时，屏幕的初始尺寸在一两秒内是错误的。所以我变得更加绝望并写下了这个怪物。 (虽然有效)

let oldSize = 0; //keeps track of what the size was
function size() {

  if (window.innerHeight != oldSize) { //if the height does not match the old height do something
    oldSize = window.innerHeight; //set the old height to the new height
    $('svg').attr('height', window.innerHeight); //set the height of the svg to the new height
  }
  setTimeout(size, 100); //wait a 10th of a second and try again.
}
size(); //start the recursive loop of desparation.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

因此这将每十分之一秒检查一次窗口大小的变化，然后使 svg 匹配该大小。

请告诉我有更好的方法。

Answer 1

您可以在窗口调整大小事件上添加一个事件监听器，而不是每 100 毫秒调用您的函数:

let oldSize = 0; //keeps track of what the size was

function size() {
  console.log('Resized!');
  if (window.innerHeight != oldSize) { //if the height does not match the old height do something
    oldSize = window.innerHeight; //set the old height to the new height
    $('svg').attr('height', window.innerHeight); //set the height of the svg to the new height
  }
}

window.addEventListener('resize', size);

size();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>