Screen Orientation API — это API браузера, который позволяет веб-разработчикам узнавать и управлять ориентацией экрана устройства. Это API позволяет детектировать, какая ориентация экрана используется в данный момент, и реагировать на изменения ориентации экрана.
Ориентация экрана имеет важное значение для многих веб-приложений, включая игры, видео- и фото-редакторы, приложения для чтения и другие. Поэтому использование Screen Orientation API может значительно улучшить пользовательский опыт для пользователей мобильных устройств.
В данной статье мы рассмотрим, как использовать Screen Orientation API на практике.
Определение текущей ориентации экрана
Для того, чтобы определить текущую ориентацию экрана, можно использовать следующий код:
if (screen.orientation.type.startsWith('portrait')) {
console.log('Портретная ориентация');
} else {
console.log('Альбомная ориентация');
}Этот код проверяет, является ли текущая ориентация экрана портретной или альбомной, и выводит соответствующее сообщение в консоль.
Управление ориентацией экрана
Screen Orientation API позволяет управлять ориентацией экрана, используя метод screen.orientation.lock(). Этот метод принимает один из следующих аргументов:
- portrait-primary — запретить любую ориентацию, кроме портретной
- portrait-secondary — запретить любую ориентацию, кроме перевернутой портретной
- landscape-primary — запретить любую ориентацию, кроме альбомной
- landscape-secondary — запретить любую ориентацию, кроме перевернутой альбомной
window.screen.orientation.lock("portrait");
Этот код заблокирует портретную ориентацию экрана и пользователь не сможет изменить ее до тех пор, пока не закроет приложение.
А вот пример кода с выводом разного контента исходя из текущей ориентации:
<!DOCTYPE html>
<html>
<head>
<title>Screen Orientation Example</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.portrait {
background-color: blue;
color: white;
font-size: 3rem;
padding: 2rem;
}
.landscape {
background-color: red;
color: white;
font-size: 4rem;
padding: 4rem;
}
</style>
</head>
<body>
<div class="container">
<div class="portrait">
<h1>Portrait mode</h1>
<p>This is some text that will only be displayed when the device is in portrait mode.</p>
</div>
<div class="landscape">
<h1>Landscape mode</h1>
<p>This is some text that will only be displayed when the device is in landscape mode.</p>
</div>
</div>
<script>
const orientation = window.screen.orientation.type;
if (orientation.includes("portrait")) {
document.querySelector('.landscape').style.display = 'none';
} else {
document.querySelector('.portrait').style.display = 'none';
}
</script>
</body>
</html>
В этом примере мы используем два блока div с классами «portrait» и «landscape», которые имеют разные стили для фона, цвета текста, размера шрифта и отступов. Мы также добавили класс «container» к родительскому блоку div, чтобы отцентрировать содержимое на странице.
В скрипте мы определяем текущую ориентацию экрана и скрываем блок div с классом «landscape» или «portrait» в зависимости от текущей ориентации. Таким образом, приложение будет отображать только один блок в зависимости от ориентации экрана устройства.
Обратите внимание, что в этом примере мы использовали свойство display: none для скрытия блока div. Вы также можете использовать другие свойства CSS, такие как visibility: hidden или opacity: 0, чтобы скрыть элементы на странице.
События orientationchange и resize
События orientationchange и resize являются часто используемыми событиями JavaScript, которые отслеживают изменения ориентации экрана и изменения размера окна браузера соответственно.
Событие orientationchange срабатывает при каждом изменении ориентации экрана устройства. Оно может быть использовано для обновления отображения элементов на странице в соответствии с новой ориентацией. Например, при изменении ориентации экрана мобильного устройства с портретной на альбомную, можно изменить ширину и высоту элементов, чтобы они лучше соответствовали новой ориентации.
Событие resize срабатывает при каждом изменении размера окна браузера. Оно может быть использовано для обновления отображения элементов на странице, чтобы они лучше соответствовали новым размерам окна. Например, при увеличении размера окна браузера можно изменить размер шрифта, чтобы текст на странице лучше читался.
Вот пример использования событий orientationchange и resize для изменения отображения элементов на странице в зависимости от размера экрана и ориентации:
window.addEventListener('orientationchange', function() {
if (window.orientation === 90 || window.orientation === -90) {
// Изменяем стили элементов на странице для альбомной ориентации экрана
document.querySelector('.container').style.width = '90%';
document.querySelector('.container').style.margin = '0 auto';
} else {
// Изменяем стили элементов на странице для портретной ориентации экрана
document.querySelector('.container').style.width = '100%';
document.querySelector('.container').style.margin = '0';
}
});
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
// Изменяем стили элементов на странице для больших экранов
document.querySelector('.header').style.fontSize = '2em';
} else {
// Изменяем стили элементов на странице для маленьких экранов
document.querySelector('.header').style.fontSize = '1em';
}
});
В этом примере мы используем событие orientationchange, чтобы изменять ширину и отступы элементов на странице в зависимости от ориентации экрана, а событие resize, чтобы изменять размер шрифта заголовка в зависимости от размера окна браузера.
Итак, мы рассмотрели Screen Orientation API и его применение для работы с ориентацией экрана устройства. Это API позволяет узнать текущую ориентацию экрана, установить ориентацию вручную, а также отслеживать изменения ориентации с помощью событий orientationchange и resize.
Событие orientationchange позволяет отслеживать изменения ориентации экрана и выполнять соответствующие действия в зависимости от текущей ориентации, например, изменять стили страницы или перерисовывать графику.
Событие resize используется для отслеживания изменений размеров окна браузера и может быть использовано в сочетании с orientationchange, чтобы более точно определить текущую ориентацию экрана.
В целом, использование Screen Orientation API может улучшить пользовательский опыт на устройствах с различными ориентациями экрана и позволить более точно настраивать отображение веб-страниц.
Более подробно о Screen Orientation API можно прочитать в официальной документации: https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API. Там вы найдете описание всех методов и событий API, а также примеры их использования.
Den Bezyzvestnykh
Материал подготовил Денис Безызвестных Опытный фулл стек разработчик с более чем 5 годами опыта в создании сайтов, приложений и сервисов. Имеет широкий спектр навыков, включающих в себя разработку на языках программирования JavaScript, TypeScript в том числе на платформе node.js Имеет опыт работы с различными фреймворками, такими как React, Vue, Express, Koa и др. Владеет навыками работы с базами данных MySQL, MongoDB, PostgreSQL, Neo4j и др.
