Чтобы выполнить код JavaScript при повороте окна, вы можете использовать различные методы в зависимости от контекста, в котором выполняется ваш код JavaScript. Вот несколько возможных подходов:
- Использование события
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;
});
- Использование медиазапросов 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);
- Использование события
orientationchange
: это событие срабатывает при изменении ориентации устройства. Вы можете прослушивать это событие и соответствующим образом выполнять свой код JavaScript. Вот пример:
window.addEventListener('orientationchange', function() {
// Execute your JavaScript code here
// ...
});