ScreenOrientation: метод lock()

Метод lock() интерфейса ScreenOrientation блокирует ориентацию содержащего документа в указанной ориентации.

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

orientation

Тип блокировки ориентации. Один из следующих:

"any"

Любая из portrait-primary, portrait-secondary, landscape-primary или landscape-secondary.

"natural"

Естественная ориентация экрана с базовой операционной системы: либо portrait-primary либо landscape-primary.

"landscape"

Ориентация, где ширина экрана больше высоты. В зависимости от конвенции платформы, это может быть landscape-primary, landscape-secondary, или оба.

"portrait"

Ориентация, где высота экрана больше ширины. В зависимости от конвенции платформы, это может быть portrait-primary, portrait-secondary, или оба.

"portrait-primary"

Основной портретный режим. Если естественная ориентация — портретная (высота экрана больше ширины), она будет такой же, как и естественная ориентация, и соответствовать углу 0 градусов. Если естественная ориентация — альбомная, то пользовательский агент может выбрать любую портретную ориентацию в качестве portrait-primary и portrait-secondary; одна из них получит угол 90 градусов, а другая — 270 градусов.

"portrait-secondary"

Второстепенная портретная ориентация. Если естественная ориентация — портретная, этот режим будет иметь угол 180 градусов (то есть устройство перевернуто относительно естественной ориентации). Если естественная ориентация — альбомная, пользовательский агент может выбрать любую ориентацию в качестве portrait-primary.

"landscape-primary"

Основной альбомный режим. Если естественная ориентация — альбомная (ширина больше высоты), она будет такой же, как и естественная ориентация, и соответствовать углу 0 градусов. Если естественная ориентация — портретная, то пользовательский агент может выбрать любую альбомную ориентацию в качестве landscape-primary с углом 90 или 270 градусов (landscape-secondary будет другой ориентацией и углом).

"landscape-secondary"

Второстепенный альбомный режим. Если естественная ориентация — альбомная, эта ориентация перевернута относительно естественной ориентации и будет иметь угол 180 градусов. Если естественная ориентация — портретная, пользовательский агент может выбрать любую ориентацию в качестве landscape-primary.

Объект Promise, который разрешается после успешной блокировки.

Обещание может быть отклонено со следующими исключениями:

InvalidStateError DOMException

Бросается, если документ не полностью активен.

SecurityError DOMException

Бросается, если состояние видимости документа скрыто или если документу запрещено использовать эту функцию (например, путём исключения ключевого слова allow-orientation-lock атрибута sandbox элемента iframe).

NotSupportedError DOMException

Бросается, если пользовательский агент не поддерживает блокировку ориентации экрана для данной ориентации.

AbortError DOMException

Бросается, если вызывается другой метод lock().

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

<div id="example_container">
  <button id="fullscreen_button">Fullscreen</button>
  <button id="lock_button">Lock</button>
  <button id="unlock_button">Unlock</button>
  <textarea id="log" rows="7" cols="85"></textarea>
</div>

const log = document.getElementById("log");

// Lock button: Lock the screen to the other orientation (rotated by 90 degrees)
const rotate_btn = document.querySelector("#lock_button");
rotate_btn.addEventListener("click", () => {
  log.textContent += `Lock pressed \n`;

  const oppositeOrientation = screen.orientation.type.startsWith("portrait")
    ? "landscape"
    : "portrait";
  screen.orientation
    .lock(oppositeOrientation)
    .then(() => {
      log.textContent = `Locked to ${oppositeOrientation}\n`;
    })
    .catch((error) => {
      log.textContent += `${error}\n`;
    });
});

// Unlock button: Unlock the screen orientation (if locked)
const unlock_btn = document.querySelector("#unlock_button");
unlock_btn.addEventListener("click", () => {
  log.textContent += "Unlock pressed \n";
  screen.orientation.unlock();
});

// Full screen button: Set the example to fullscreen.
const fullscreen_btn = document.querySelector("#fullscreen_button");
fullscreen_btn.addEventListener("click", () => {
  log.textContent += "Fullscreen pressed \n";
  const container = document.querySelector("#example_container");
  container.requestFullscreen().catch((error) => {
    log.textContent += `${error}\n`;
  });
});

Для тестирования примера, сначала нажмите кнопку «Полноэкранный режим». После того, как пример перейдёт в полноэкранный режим, нажмите кнопку «Заблокировать», чтобы переключиться на ориентацию, и «Разблокировать», чтобы вернуться к естественной ориентации.