Полноэкранный режим сайта с помощью FullScreen API

FullScreen API

Демо

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

Это относится и к Full Screen API . Как будто в одночасье он перешел от эксперимента к функции, поддерживаемой более чем половиной браузеров. Сейчас вам возможно интересно, чем он отличается от обычного полноэкранного режима, при нажатии в браузере F11 на Windows, или Shift + Command + F в Mac.

Что вам нужно знать

С помощью этого api вы можете отображать в полноэкранном режиме не только целые страницы, но и отдельные элементы внутри них. Цель здесь — предоставить возможность полноэкранного режима для HTML5 видео и игр, чтобы мы могли наконец объявить HTML5 как жизнеспособную альтернативу Flash.

Короче говоря, вот что вам нужно знать о FullScreen API:

  • Работает в Firefox 10Safari и Chrome ;
  • Запускается с помощью нового метода requestFullScreen() ;
  • Может отображать любой элемент на весь экран, а не только всю страницу;
  • По соображениям безопасности полноэкранный режим может быть запущен только из обработчика событий (то есть инициируется пользователем);
  • Также для обеспечения безопасности, Safari блокирует все нажатия с клавиатуры, за исключением стрелок и клавиш управления, другие браузеры при вводе с клавиатуры отображают предупреждающие сообщения;
  • API по-прежнему в разработке, поэтому вам нужно использовать специальные вендорные методы (префиксы moz и webkit);

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

Однако даже в его нынешней ограниченной форме API дает нам возможность улучшить опыт конечного пользователя.

 

click-to-go-full-screen

Основы

Согласно черновику W3, у нас есть доступ к ряду методов и свойств, которые помогут нам с задачей переключения нашего элемента на полный экран.

В настоящее время использование API довольно громоздко, так как для поддержки всеми браузерами нам нужно будет использовать префиксы vendor specific ones, такие как elem.mozRequestFullScreen() и elem.webkitRequestFullScreen().

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

Разумеется, необходимо добавлять префиксы moz и webkit. Но есть решение проще.

Плагин jQuery

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

Этот код переведет элемент #content в полноэкранный режим. Плагин также имеет флаг поддержки jQuery метода, поэтому перед выполнением кода мы можем выполнить проверку:

Чтобы выйти из режима, снова вызовите метод fullScreen() или нажмите esc.

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

Практическая часть

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

Существует также практическое ограничение размера шрифта, не говоря уже о самом шрифте. Если у вас есть боковая панель, это также ограничивает горизонтальное пространство для вашего контента.

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

readermode-full-screen-api

Создание режима чтения

Все довольно просто, нам нужна только кнопка, которая активирует плагин FullScreen. Мы можем использовать флаг $.support.fullscreen, чтобы проверить, поддерживает ли API текущий браузер. Если поддерживает, на странице появится кнопка с классом goFullScreen для переключения в полноэкранный режим.

Когда блок #primary отображается в полноэкранном режиме, ему назначается ширина и высота 100%. Если мы хотим, чтобы он был центрирован в середине экрана, то нам необходимо это исправить. Для этого стилизуем #primary.fullScreen, применяемый в полноэкранном режиме.

Вот и все! Только браузеры, поддерживающие полноэкранный режим, будут отображать кнопку.

Готово!

На веб-сайте есть множество мест, где вы можете использовать полноэкранный режим — от видео и canvas игр, до диалоговых окон и предварительного просмотра. Я лично хотел бы, чтобы это использовалось для инфографики и презентаций. Мы можем пройти долгий путь с такой полезной функцией.

Не совсем точный перевод статьи на tutorialzine.com