У комплекті з HTML5 з'явилася велика кількість нового API. Одним з кращих стало Fullscreen API, яке надає нативний спосіб для браузера, що дозволяє відобразити веб-сторінку в повноекранному режимі для користувача.
А ще добре те, що Fullscreen API є дуже простим у використанні.
Методи, що входять до складу Fullscreen API:
Цей метод дозволяє одному елементу перейти в повноекранний режим.
Виконання цього коду призведе до того, що canvas з ID 'myCanvas' перейде в повноекранний режим.
Скасовує повноекранний режим.
Повертає значення «істина», якщо користувач знаходиться в повноекранному режимі.
Повертає елемент, який в даний час знаходиться в повноекранному режимі.
Зверніть увагу, що це стандартні методи. Для того, що б вони працювали у всіх браузерах, нам необхідно використовувати префікси.
Підтримувані браузери
В даний час Internet Explorer і Opera не підтримують це API.
Запуск повноекранного режиму
Спочатку ми повинні з'ясувати, який метод розпізнає наш браузер. Для цього ми створимо функцію, яка буде перевіряти підтримку методу і викличе робочий метод:
Якщо будь-який з requestFullScreen методів повертають істинне значення, то викликається той метод, який підтримується конкретним браузером і використовує псевдоклас з його префікском.
Після цього все потрібно викликати функцію для повноекранного режиму:
Результатом буде запит користувачеві з проханням дозволити перехід в повноекранний режим, якщо користувач дозволить перехід, то все панелі інструментів в браузері зникнуть, і на всьому екрані буде веб-сторінка або один елемент.
Скасування повноекранного режиму
Цей метод також вимагає префікси, тому ми будемо використовувати ту ж ідею для перевірки підтримки методів браузерами. Створимо функцію, яка буде визначати, який префікс ми повинні використовувати в залежності від браузера користувача.
Цей метод не вимагає ніяких параметрів, оскільки на відміну від методу requestFullScreen він завжди відноситься до всього документа.
CSS псевдокласи
Він може бути використаний для завдання стилю будь-яких елементів на веб-сторінці, коли сторінка або елемент знаходиться в повноекранному режимі. Даний псевдоклас може стати в нагоді для завдання розміру елементів сторінки, тому що в повноекранному режимі відбувається збільшення і самого робочого простору браузера.
Врахуйте, що не можна відокремлювати префікси запитом, тому що браузер не зможе розпізнати їх:
Для того, щоб стилі застосовувалися правильно, ви повинні помістити кожен псевдоклас з префіксом браузера в своєму власному блоці.