как сделать так, чтобы высота svg соответствовала высоте экрана независимо от того, какое устройство или размер экрана вы используете - PullRequest
Новая
       15

как сделать так, чтобы высота svg соответствовала высоте экрана независимо от того, какое устройство или размер экрана вы используете

0 голосов
/ 10 ноября 2019

Мне нужен svg, чтобы всегда соответствовать высоте экрана независимо от платформы. Я выбираю svg в css и устанавливаю высоту 100% или высоту: 100vh или min-height: 100vh и около 10 других комбинаций. но когда я возлюсь с ним на панели инструментов устройства, я всегда могу найти устройство, для которого оно не будет работать.

Особенно Ipad.

Так что я пришел в отчаяние и использовал событие "onResize"и установите высоту svg на высоту экрана с помощью window.innerHeight с использованием javascript.

Но, по-видимому, 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>

, так что каждые 10 секунд будет проверяться изменение размера окна, а затем svg будет соответствовать размеру.

, скажите, пожалуйста,мне есть лучший способ.

1 Ответ

0 голосов
/ 10 ноября 2019

Вы можете добавить прослушиватель событий в событие изменения размера окна вместо вызова вашей функции каждые 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>
...