Как грамотно сделать включение/отключение скрипта при изменении ширины окна?

Question

[partyzanx]

Есть скрипт



Как сделать, чтобы он включался при ширине окна <= 500 пикселей, и выключался при ширине > 501 .
Ну и конечно при загрузке сайта выполнял проверку и при ширине окна <= 500 пикселей уже был включен, и выключен при ширине > 501.

Перепробовал пятёрку методов, они выполняли только второй пункт, а при изменении ширины экрана скрипт также вёл себя как при ширине экрана при первой загрузке, то есть, не включался или не отключался.

Спасибо

Answer 1

[Planet_93]

Можете сделать это так.

Получать ширину при resize и проверять её значение

function fixB() {

  if (document.body.clientWidth < 500) {
    console.log(document.body.clientWidth + " меньше 500");
  } else {
    console.log(document.body.clientWidth + " больше 500")
  }
}

Comments

[partyzanx]

Если окно широкое, то сначала элемент .b имеет width: 70px как прописано в css; = ок
Когда окно уменьшаем < 500 , то срабатывает функция = ок
Когда окно опять увеличиваем больше 500 по ширине, то функция не откатывает изначальные css свойства = не ок
Помогите исправить, пожалуйста

[Planet_93]

partyzanx, в else установите старое значение width.

if (document.body.clientWidth < 500) {
  const margin = 20;
  $('.b').width($(window).width() - margin * 2).css('left', function() {
    return `-${$(this).parent().offset().left - margin}px`
  });
}
else{
$(' .b').css( "width", "70px" );
}

Answer 2

[Андрей Охотников]

<script type="text/javascript">
{
if (screen.width > 500) document.write ('<script type="text/javascript" src="script.js" ></script>');
}
</script>

Answer 3

[Ice]

грамотно сделать вообще без скриптов.
используйте media в css https://developer.mozilla.org/ru/docs/Web/CSS/Medi...
Пример https://www.w3schools.com/cssref/tryit.asp?filenam...

Comments

[partyzanx]

:D