Как отследить изменение ширины HTML на чистом JS?

Question

[VernerBorn]

Делаю слайдер для сенсорных устройств

<div class="section-project">
  <h6 class="section-subtitle">Наши</h6>
  <h2 class="section-title">Проекты</h2>
  <div class="section-project-block">
    <a href="index.html" class="section-project-box karel">
      <p class="section-project-title">Карел</p>
      <p class="section-project-text">Угловая кухня, с резными фасадами - 78 000р</p>
    </a>
    <a href="index.html" class="section-project-box kinoshult">
      <p class="section-project-title">Киносхульт</p>
      <p class="section-project-text">Угловая кухня, с резными фасадами - 78 000р</p>
    </a>
    <a href="index.html" class="section-project-box overbul">
      <p class="section-project-title">Овербул</p>
      <p class="section-project-text">Угловая кухня, с резными фасадами - 78 000р</p>
    </a>
    <a href="index.html" class="section-project-box action">
      <p class="section-project-title">Кухня вашей мечты</p>
    </a>
    </a>
  </div>
</div>

var project_block = document.querySelector(".section-project-block")
var width = document.documentElement.clientWidth
var startx = 0
var dist = 0
var left = 0
var right = 0
var endx = 0
var resize = 0
if (width < 575) {
  project_block.addEventListener('touchstart', function(e) {
    var touchobj = e.changedTouches[0]
    startx = parseInt(touchobj.clientX)
  });

  project_block.addEventListener('touchend', function(e) {
    var touchobj = e.changedTouches[0]
    endx = parseInt(touchobj.clientX)
    dist = startx - endx
    if (dist > 60) {
      left = left - 280
      if (left < -840) {
        left = 0
      }
      project_block.style.left = left + "px"
    } else if (dist < -60) {
      if (left < 0) {
        left = left + 280
        project_block.style.left = left + "px"
      }
    }
  })
}

Слайдер срабатывает только если область меньше 575px
Но если человек с вертикальной ориентации, повернет в горизонтальную, все ломается, пока не обновишь страницу.
Есть по идее 2 пути решения
1. Раз в секунду измерять размер элемента
2. Через resize, но поддержка страдает
Ищу решение на чистом JS, может просто туплю и не вижу простого решения
Это мой первый опыт в веб разработке)

Answer 1

[Stalker_RED]

Ответ на вопрос в заголовке: MutationObserver()
Но при повороте DOM не меняется же.

Чем вам resize не угодил для отслеживания "изменения ширины"?

Но возможно лучшим вариантом будет @media orientation

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Comments

[Rustam Bainazarov]

Стоит отметить, что orientation в CSS не зависит от реального положения устройства в пространстве, а является лишь соотношением высоты к ширине. Ещё проблема в том, что в альбомной ориентации высотой viewport'a является то значение, что было шириной в портретной ориентации. Этот может стать проблемой. Так, на IPhone X в альбомной ориентации срабатывают стили от портретной ориентации iPad 9.7" (768–1023px).

Лучше использовать JS для точного определения ориентации устройства. К примеру: https://developer.mozilla.org/en-US/docs/Web/API/D...

Answer 2

[VernerBorn]

Я передвинул слайдер влево

Но если человек перевернул устройство, то срабатывает медиа запрос. И все ломается(