JS властивість Fullscreen.fullscreenEnabled

Загальний опис

fullscreenEnabled - властивість об’єкта document, яка перевіряє, чи дозволяє браузер ввімкнути режим повного екрану. Це булева властивість, яка повертає true, якщо користувацький агент (браузер) підтримує і дозволяє повноекранний режим, і false, якщо цей режим недоступний. Важливо розуміти, що fullscreenEnabled не вмикає режим повного екрану сам по собі, а лише вказує на його доступність.

Цю властивість часто використовують, коли потрібно визначити, чи можливо для поточного браузера або середовища активувати повноекранний режим. Наприклад, перед тим, як спробувати активувати повноекранний режим, програміст може перевірити document.fullscreenEnabled, щоб уникнути помилок у браузерах або середовищах, де ця функція не підтримується. Якщо значення true, можна викликати метод requestFullscreen(), щоб зробити певний елемент (або всю сторінку) повноекранним. Якщо значення false, то викликати метод не варто, і замість цього можна попередити користувача про неможливість переходу в повноекранний режим.

Приклад:

if (document.fullscreenEnabled) {
   document.documentElement.requestFullscreen();
} else {
   console.log("Режим повного екрану не підтримується в цьому браузері.");
}

У наведеному коді перевірка document.fullscreenEnabled визначає, чи слід ініціювати повноекранний режим. Якщо значення false, можна відобразити відповідне повідомлення, вказавши на відсутність підтримки.

fullscreenEnabled корисний для розробників, оскільки не всі браузери або пристрої підтримують режим повного екрану однаково, а властивість дозволяє перевірити це, що особливо важливо для додатків, які залежать від максимального розміру екрану, таких як відеоплеєри, інтерактивні презентації або ігри.

правити

Порада

Коли ви тестуєте ваш код, враховуйте, що fullscreenEnabled може працювати по-різному в приватному режимі браузера. В деяких випадках режим повного екрану блокується саме у приватному режимі, і властивість повертатиме false.

автор: Bond правити

Порада

Не забувайте, що fullscreenEnabled слід використовувати разом з подіями, щоб відслідковувати будь-які зміни у повноекранному режимі. За допомогою fullscreenchange ви можете відслідкувати вхід та вихід із повноекранного режиму, що дає можливість додатково адаптувати інтерфейс у режимі реального часу.

автор: Bond правити

Порада

Оскільки fullscreenEnabled не активує режим повного екрану, використовуйте його перед викликом requestFullscreen(), щоб уникнути непотрібних помилок у середовищах без підтримки повноекранного режиму. Це забезпечує стабільну роботу вашого коду і полегшує обробку винятків.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

document.fullscreenEnabled

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	71	64	16.4	58	12	11*

Підтримка: мобільні переглядачі

Переглядач
	71	71	64	16.4*

Приклади

+ запропонувати свій приклад у пісочниці

<video id="videoPlayer" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

if (document.fullscreenEnabled) {
   document.querySelector("#videoPlayer").requestFullscreen().then(() => {
       console.log("Відео відтворюється в повноекранному режимі");
   }).catch((error) => {
       console.error("Неможливо активувати повноекранний режим:", error);
   });
}

<button id="fullscreenBtn">На весь екран</button>

function toggleFullscreen() {
   if (document.fullscreenEnabled) {
       if (!document.fullscreenElement) {
           document.documentElement.requestFullscreen();
       } else {
           document.exitFullscreen();
       }
   } else {
       console.log("Повноекранний режим не підтримується.");
   }
}
document.querySelector("#fullscreenBtn").addEventListener("click", toggleFullscreen);