Полноэкранный режим сайта: кнопка, выход и проверка

Полноэкранный режим сайта убирает интерфейс браузера и показывает выбранный блок на экране после действия посетителя. Для кнопки на своей странице используйте Fullscreen API: по нажатию вызовите requestFullscreen(), предусмотрите выход и обработайте отказ. Это инструкция для галереи, презентации или интерактивного блока, где такое переключение действительно помогает. Если нужно лишь растянуть первый экран по высоте без скрытия браузера, нужен CSS, а не полноэкранный режим.

Отличите полноэкранный режим от вёрстки на весь экран

CSS меняет размеры содержимого внутри вкладки; адресная строка и вкладки остаются. Fullscreen API разворачивает элемент поверх обычного интерфейса и позволяет вернуть его обратно. MDN описывает, что метод применяется к выбранному элементу и что поддержка может отличаться между браузерами. Для задачи «первый экран на всю высоту» есть отдельная инструкция по CSS.

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

Что подготовить до кода

Нужен доступ к HTML и JavaScript своей страницы. Выберите один контейнер, который будет разворачиваться, и разместите кнопку внутри него: тогда она останется видимой после входа. Подготовьте обычное отображение контента как запасной вариант. Браузер может отказать в переключении, а MDN отмечает ограниченную доступность API, поэтому содержание не должно зависеть от этой кнопки.

Проверьте, что содержимое контейнера можно читать и без разворота, а кнопку можно достигнуть клавишей Tab. На мобильном экране предусмотрите прокрутку внутри блока: при увеличении шрифта или повороте устройства информация не должна обрезаться. Если сайт собирается ИИ-инструментом, попросите добавить именно кнопку для выбранного блока, а затем проверьте результат по шагам ниже. Общий порядок сборки и проверки показан в разборе сайта с ИИ.

Добавьте кнопку и рабочий сценарий

Ниже минимальный пример: кнопка переключает выбранный блок, обрабатывает отказ и меняет подпись после выхода через Esc. Метод вызывается непосредственно внутри обработчика нажатия. Это важно: документация MDN по requestFullscreen требует пользовательского действия; автоматический запуск при открытии страницы не является рабочим сценарием.

<section id="presentation">
  <button id="fullscreen-toggle" type="button">Во весь экран</button>
  <p id="fullscreen-status" role="status"></p>
  <h2>Презентация проекта</h2>
  <p>Содержимое остаётся доступным и в обычном режиме.</p>
</section>
<style>
#presentation:fullscreen {
  background: #fff; color: #111; padding: 2rem;
  overflow: auto;
}
</style>
<script>
const panel = document.getElementById("presentation");
const toggle = document.getElementById("fullscreen-toggle");
const status = document.getElementById("fullscreen-status");
toggle.addEventListener("click", async () => {
  try {
    if (document.fullscreenElement === panel) {
      await document.exitFullscreen();
    } else if (document.fullscreenEnabled && panel.requestFullscreen) {
      await panel.requestFullscreen();
    } else {
      status.textContent = "Полноэкранный режим недоступен.";
    }
  } catch (error) {
    status.textContent = "Браузер не разрешил переключение.";
  }
});
document.addEventListener("fullscreenchange", () => {
  const active = document.fullscreenElement === panel;
  toggle.textContent = active ? "Выйти из режима" : "Во весь экран";
  if (active) status.textContent = "";
});
</script>

Здесь document.fullscreenElement показывает, какой элемент сейчас развернут, а fullscreenchange помогает обновить подпись и после выхода через интерфейс браузера. Это штатные свойства и событие из руководства MDN. Стили :fullscreen задают читаемый фон и прокрутку внутри развернутого блока; без них внешний вид может отличаться от обычного режима.

По теме: Как сделать внешние ссылки на сайте: HTML и проверка

Как проверить результат

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

1. Нажмите «Во весь экран». Выбранный блок занимает экран, содержимое читается, кнопка выхода остаётся доступной.
2. Нажмите «Выйти из режима», затем повторите вход и выйдите клавишей Esc там, где она доступна. Подпись кнопки должна вернуться.
3. Откройте страницу в поддерживаемых вами браузерах и на телефоне. Если кнопка не работает, обычный контент всё равно должен быть видим.
4. Увеличьте текст и поверните телефон. Убедитесь, что содержимое не обрезано и до кнопки выхода можно добраться прокруткой.

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

Почему кнопка не срабатывает

Если запрос выполнен при загрузке страницы или после отложенного действия без непосредственного нажатия, браузер может его отклонить: верните вызов requestFullscreen() в обработчик кнопки. Если метод отсутствует или document.fullscreenEnabled равен false, покажите сообщение и оставьте обычный просмотр. Отказ также возможен из-за политики разрешений или вложенного окна. MDN перечисляет условия запроса и объясняет, что результат метода приходит как Promise, который может отклониться.

Если блок находится внутри <iframe> другого сайта, владелец внешней страницы должен разрешить полноэкранный режим для вложения. Одного кода внутри вашего блока может быть недостаточно; ограничения allow и политики доступа описаны в справке по iframe и по полноэкранной политике. Если кнопка работает, но скрывает собственный выход, переместите кнопку внутрь разворачиваемого контейнера.

По теме: Как сделать сайт для проекта: этапы и результат

Ограничения на телефоне и безопасный выход

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

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

Частые вопросы

Можно включить режим автоматически при открытии страницы?

Надёжный сценарий требует действия посетителя. Поставьте явную кнопку, а страницу оставьте полезной и без переключения.

Почему Esc возвращает прежний вид, а подпись кнопки не меняется?

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

Нужно разворачивать всю страницу или один блок?

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