Большинство браузеров уже некоторое время имеют возможность переходить в полноэкранный режим или режим киоска. По сути, пользовательский интерфейс Chrome браузера уходит с дороги, и контент берет верх. Для приложений, установленных из Интернет-магазина Chrome, пользователи даже могут вручную настроить запуск приложения в полноэкранном режиме при его открытии со страницы новой вкладки. Ручной полноэкранный режим — это хорошо. Программный полноэкранный режим лучше!
Полноэкранный API позволяет веб-приложениям программно сообщать любому содержимому на странице о переходе в полноэкранный режим просмотра браузера с помощью JavaScript. Это означает, что игры WebGL и <canvas>
наконец-то смогут стать полностью захватывающими, видео — как киноэкран, а онлайн-журналы — как настоящее дело. Обожаю браузер, но не стоит им ограничиваться :)
Если вы хотите пропустить подробности, вот демо :

Так как же работает API? Если вы хотите, например, чтобы <div>
работал в полноэкранном режиме, просто сообщите об этом:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Затем, чтобы выйти из полноэкранного режима, document
предоставляет для этого метод:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Содержимое в полноэкранном режиме центрируется в области просмотра браузера. Разработчику остается стилизовать этот контент так, чтобы он был наиболее подходящим для просмотра. Обычно вам нужно, чтобы ваш <div>
занимал всю площадь экрана. Хорошей новостью является то, что API включает в себя новые псевдоселекторы CSS:
div:-webkit-full-screen {
width: 100% !important;
}
div:-moz-full-screen {
width: 100% !important;
}
div:-ms-fullscreen {
width: 100% !important;
}
div:fullscreen {
width: 100% !important;
}
/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
display: none;
}
:-moz-full-screen .tohide {
display: none;
}
:-ms-fullscreen .tohide {
display: none;
}
:fullscreen .tohide {
display: none;
}
Псевдоселекторы CSS позволяют легко стилизовать полноэкранный контент так, как вы захотите.
Полноэкранный API включен по умолчанию в Chrome 15, FF 14, IE 11 и Opera 12.1. Дополнительную информацию об остальном API смотрите в спецификации .
Обновлено 11 октября 2012 г .: чтобы соответствовать изменениям спецификаций. Букву S в requestFullscreen()
поместили в нижний регистр, а document.webkitCancelFullScreen()
изменили на document.webkitExitFullscreen()
. Обновлен комментарий о совместимости браузера.
Обновлено 11 февраля 2014 г .: добавлены префиксы для IE, добавлен стандартный синтаксис CSS и обновлен комментарий о совместимости браузера. Спасибо @dstorey и @patrickkettner .