Создание полноэкранных веб-приложений

От автора: полноэкранный дизайн пользовательского интерфейса помогает удерживать внимание пользователей на контенте, устраняя отвлекающие факторы. Таким образом, мы видим увеличение использования полноэкранных пользовательских интерфейсов в современных веб-приложениях. В этой статье я расскажу о функциях полноэкранного API JavaScript и проведу вас через этапы их использования на практике.

Что такое полноэкранный API?

Полноэкранный API предоставляет методы для интеграции полноэкранного отображения элементов DOM и их дочерных элементов. Разработчики могут использовать эту функцию, чтобы подчеркнуть полезную информацию для конечных пользователей.

Переход в полноэкранный режим улучшает взаимодействие с пользователем при просмотре изображений, видео или во время игр.

Примечание. Браузеры поддерживают полноэкранный API по-разному, например Safari поддерживает эту функцию только частично. Но мы можем решить эту проблему, используя префиксы, и я объясню это в следующих разделах.

Практическое использование полноэкранного API

Работать с полноэкранным API очень просто. Он содержит ограниченный набор функций, и все, что нам нужно сделать, это немного настроить.

Итак, я буду создавать простое приложение, подобное приведенному ниже, чтобы продемонстрировать все функции полноэкранного API. Вы можете найти полный код здесь и протестировать его самостоятельно.

Создание полноэкранных веб-приложений

Пример полноэкранного API

Шаг 1. Запрос полноэкранного просмотра

Полноэкранный API предоставляет метод requestFullscreen() для запроса полноэкранного просмотра из браузера. Он возвращает промис, который разрешится после активации полноэкранного режима.

Здесь я прослушал событие нажатия кнопки и запросил полноэкранный режим для document. В результате приложение перейдет в полноэкранный режим. Мы можем использовать функцию requestFullscreen() для любого элемента. Я запросил полноэкранный режим для карты, и окончательная реализация будет выглядеть так.

Шаг 2 — Выход из полноэкранного режима

Выйти из полноэкранного режима очень просто, так как пользователь может использовать клавишу Esc или любой другой традиционный метод.

Однако, если вы хотите реализовать его с помощью кнопки, вы можете использовать метод exitFullscreen(). Этот метод переключит текущий элемент обратно в оконный режим из полноэкранного.

В моем примере я создал кнопку «Exit Fullscreen» и использовал слушателей событий для запуска метода exitFullscreen().

Шаг 3 — включение и отключение полноэкранного режима

Иногда вы можете предпочесть использовать одну кнопку-переключатель для включения и отключения полноэкранного режима, чем использовать несколько кнопок. Но полноэкранный API не обеспечивает прямого подхода к переключению между оконным и полноэкранным режимами.

Однако мы можем легко реализовать функцию полноэкранную переключения, используя существующие методы и свойства. В этом примере я буду использовать указанные ниже свойства, чтобы проверить, поддерживает ли браузер полноэкранный режим или находится ли приложение уже в полноэкранном режиме.

document.fullscreenEnabled — Это свойство проверяет, поддерживает ли браузер полноэкранный режим и разрешено ли это пользователем.

document.fullscreenElement — Это свойство возвращает текущий элемент в полноэкранном режиме. Возвращает null, если мы не в полноэкранном режиме.

Функция toggleFullscreen() будет выглядеть следующим образом.

Здесь я сначала проверил поддержку браузера и проверил, отображается ли элемент в настоящее время в полноэкранном режиме. В зависимости от результата приложение выйдет или запросит полноэкранный режим. Наконец, вы можете привязать этот метод к нажатию кнопки или нажатия клавиши, как показано ниже:

Создание полноэкранных веб-приложений

Полноэкранное переключение

Шаг 4 – Стилизация полноэкранного режима

Мы можем добавить определенные стили для полноэкранных элементов с помощью псевдокласса CSS :fullscreen. Затем, когда пользователь запрашивает полноэкранный режим, к пользовательскому интерфейсу будут применены стили.

Если я применяю приведенный ниже класс CSS к желтому элементу фона

в приведенном выше примере, его цвет будет изменен на коричневый, цвет шрифта — на белый, а текст выровнен по центру экрана.

Создание полноэкранных веб-приложений

После стилизации <p> с помощью :fullscreen

Совет: мы можем использовать псевдоэлемент ::backdrop для стилизации элемента, который находится непосредственно под полноэкранным элементом.

Использование префиксов

Как я уже упоминал ранее, браузер Safari частично поддерживает функции, которые мы обсуждали выше.
Чтобы решить эту проблему, полноэкранный API поставляется в комплекте с префиксами для каждого метода и свойства, которые мы обсуждали ранее.

Эти префиксы представляют собой часто используемые браузеры, такие как Firefox, Edge и движок Apple WebKit.
Чаще всего используются префиксы mos-, ms- и webkit-.

Например, мы можем использовать mozRequestFullScreen(), msRequestFullscreen() и webkitRequestFullscreen() для входа в полноэкранный режим.

Совет: вы можете найти полный список префиксов для полноэкранного API в MDN Docs.

Заключение

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

Полноэкранный API предоставляет множество функций, с которыми можно поиграть. Но удобство использования полноэкранного API зависит от среды браузера.

Тем не менее, мы можем легко преодолеть проблемы совместимости, используя префиксы или сторонние библиотеки, такие как react-fullscreen, react-hooks-full-screen, screenfull.js и fscreen. Спасибо за чтение!!!

Автор: Dulanka Karunasena

Источник: blog.bitsrc.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.