:fullscreen

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Псевдокласс :fullscreen CSS псевдокласс соответствует каждому элементу, который в данный момент находится в полноэкранном режиме. Если несколько элементов были переведены в полноэкранный режим, он выбирает их все.

Синтаксис

:fullscreen {
  /* ... */
}

Примечания к использованию

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

Примеры

Стилевание полноэкранного элемента

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

<div class="element">
  <h1>MDN :fullscreen pseudo-class demo</h1>

  <p>
    This demo uses the <code>:fullscreen</code> pseudo-class to automatically
    change the background color of the <code>.element</code> div.
  </p>

  <p>
    Normally, the background is light yellow. In fullscreen mode, the background
    is light pink.
  </p>

  <button class="toggle">Toggle Fullscreen</button>
</div>

Псевдокласс :fullscreen используется для переопределения background-color элемента <div> при его переходе в полноэкранный режим.

.element {
  background-color: lightyellow;
}

.element:fullscreen {
  background-color: lightpink;
}

Следующий JavaScript предоставляет функцию обработчика событий, которая переключает полноэкранный режим, когда нажимается элемент <button>.

document.querySelector(".toggle").addEventListener("click", function (event) {
  if (document.fullscreenElement) {
    // If there is a fullscreen element, exit full screen.
    document.exitFullscreen();
    return;
  }
  // Make the .element div fullscreen.
  document.querySelector(".element").requestFullscreen();
});

Демо

Посмотреть пример в действии.

Спецификации

Спецификация
Стандарт API полноэкранного режима # :fullscreen-pseudo-class

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:fullscreen`	7115	12	649	5815	16.46	7118	649	5014	16.4 ["Только доступно на iPad, а не на iPhone.", "Отображает кнопку наложения, которую нельзя отключить. Проведение пальцем вниз завершает полноэкранный режим, что делает его непригодным для некоторых случаев использования, таких как игры."] 12 Только доступно на iPad, а не на iPhone.	10.01.0	7137
`all_elements`	Нет	12–79	43	Нет	Нет	Нет	43	Нет	Нет	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen