Методы выполнения кода JavaScript при повороте окна

Чтобы выполнить код JavaScript при повороте окна, вы можете использовать различные методы в зависимости от контекста, в котором выполняется ваш код JavaScript. Вот несколько возможных подходов:

  1. Использование события resize: вы можете прослушивать событие resizeв объекте windowи проверять, произошло ли вращение окна. произошел. Вот пример:
window.addEventListener('resize', function() {
  // Check if the window width and height have changed
  if (window.innerWidth !== this.oldWidth || window.innerHeight !== this.oldHeight) {
    // Window rotation has occurred, execute your JavaScript code here
    // ...
  }
// Update the old width and height
  this.oldWidth = window.innerWidth;
  this.oldHeight = window.innerHeight;
});
  1. Использование медиазапросов CSS. Вы можете определить различные стили CSS, которые будут применяться к окну при его повороте, а затем использовать JavaScript для определения момента применения этих стилей. Вот пример:
@media screen and (orientation: landscape) {
  /* CSS styles for landscape orientation */
}
@media screen and (orientation: portrait) {
  /* CSS styles for portrait orientation */
}
function checkOrientation() {
  if (window.matchMedia("(orientation: landscape)").matches) {
    // Window is in landscape orientation, execute your JavaScript code here
    // ...
  } else if (window.matchMedia("(orientation: portrait)").matches) {
    // Window is in portrait orientation, execute your JavaScript code here
    // ...
  }
}
window.addEventListener('resize', checkOrientation);
  1. Использование события orientationchange: это событие срабатывает при изменении ориентации устройства. Вы можете прослушивать это событие и соответствующим образом выполнять свой код JavaScript. Вот пример:
window.addEventListener('orientationchange', function() {
  // Execute your JavaScript code here
  // ...
});