Переключить класс при изменении ориентации в javascript

#javascript #html #css #vue.js

#javascript #HTML #css #vue.js

Вопрос:

Как мы можем переключать класс element на основе ориентации устройства.

Пример:

 <div class="landscape"></div>

 @media (orientation: portrait) {
.landscape: {...}
}

Я могу изменить landscape свойства css. но я хочу избежать этого.

Вместо этого я хотел бы изменить сам класс таким образом, чтобы он выглядел как

 <div class="portrait"></div> // if orientation is portrait
<div class="landscape"></div> // if orientation is landscape

Любые предложения по этому поводу!

Примечание: Также принял бы ответ для vue

Обновление: screen.orientation не работает на safari . решение должно работать на safari тоже.

спасибо за ваши приемлемые ответы.

1. Помогает ли это? developer.mozilla.org/en-US/docs/Web/API /…

2. @PeterSH это довольно сложно, хотелось, чтобы это было просто, как ориентация portrait или landscape . спасибо за ссылку.

3. Это проще: developer.mozilla.org/en-US/docs/Web/API/Screen/orientation . Имейте в виду, что это ограничивает совместимость с браузерами (особенно с мобильными браузерами)

4. @PeterSH вы правы!, это выдает ошибку в safari браузере. Найдено правильное решение, опубликую здесь.

Ответ №1:

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

 window.matchMedia('(orientation: portrait)').addListener(function(m) {
       let div_class = document.querySelector('.landscape');
       if (m.matches) {
                div_class.className = 'portrait';
            } else {
                div_class.className = 'landscape';
            }
    });

Ответ №2:

 window.addEventListener("orientationchange", function (event) {
  const { angle } = event.target.screen.orientation; // orientation angle
  let orientation = angle === 90 || angle === -90 ? "landscape" : "portrait";

  const element = document.getElementById("#customElement");
  
  element.classList.remove(['landscape', "portrait"]);
  element.classList.add(orientation);
});

1. ` screen.orientation` не работает в safari браузере, my bad не упоминал об этом.

2. будет ли, тогда включите обходной путь для этого в мой ответ

3. orientationchange теперь это устаревшая функция: developer.mozilla.org/en-US/docs/Web/API/Window /…

Ответ №3:

хорошим способом сделать это было бы также указать элементу и идентификатору «orient»: safari использует не window.screen.orientation, а window.orientation

 <div class="" id="orient"></div>

 const orient = document.querySelector("#orient")

//add the current orientation as a class
if(!window.orentation){
    orient.classList.add(window.screen.orientation===0 ||  window.screen.orientation===180 ? "portrait":"landscape")
}else{
    orient.classList.add(window.orientation===0 ||  window.orientation===180 ? "portrait":"landscape") //for safari
}

//now check for when orientation changes and toggle on/off as required
//safari uses window.orientation instead :(
window.addEventListener("orientationchange", (e)=>{
        orient.classList=""; //empty class list
        if(!window.orientation){
            orient.classList.add(window.screen.orientation===0 || window.screen.orientation===180 ? "portrait":"landscape"); //add the correct value back
        }else{
            orient.classList.add(window.orientation===0 || window.orientation===180 ? "portrait":"landscape"); //for safari :(
        }
});

Ответ №4:

Как я реализовал, основываясь на принятом решении.

     window.matchMedia('(orientation: portrait)').addListener(function(event) {
      if (event.matches) {
        const landscapeClassElements = document.querySelectorAll('.landscape');
        landscapeClassElements.forEach(element => {
          element.classList.remove('landscape')
          element.classList.add('portrait')
        });
      } else {
        const portraitClassElements = document.querySelectorAll('.portrait');
        portraitClassElements.forEach(element => {
          element.classList.remove('portrait')
          element.classList.add('landscape')
        });
      }
    });

matchMedia('(orientation: portrait)').matches возвращает true для portrait

window.matchMedia прост и также работает на safari !

Ответ №5:

Вы можете использовать css для достижения этой цели!

 .portrait { display: none; }
.landscape { display: block; }

@media (orientation: portrait) {
  .portrait { display: block; }
  .landscape { display: none; }
}