Определите портретный или альбомный режим и уровень масштабирования для мобильных устройств (но не для браузеров)

Question

Я знаю, что один из ответов для определения портретного или ландшафтного узла -

window.innerWidth > window.innerHeight

Но после 60-й версии Chrome определение innerWidth и innerHeight изменилось, и теперь оно представляет область просмотра макета.Поэтому, как только клавиатура открыта, хотя устройство находится в портретном режиме, window.innerHeight становится меньше, чем window.innerWidth, и это говорит о том, что это альбомный режим.

Также обратите внимание на следующие вещи -

1. Не хочу ставить определенные браузерные проверки.
2. При изменении ориентации некоторые устройства также запускают событие изменения размера, прежде чем фактически изменить значение ориентации. Так что, в этом случае при обратном вызове изменения размера, ориентация устройствана самом деле будет альбомной ориентацией, но значение ориентации будет отображаться как портрет.
3. window.screen.orientation также не совместимо с различными браузерами.

Answer 1

Вы можете использовать outerWidth вместо innerWidth, чтобы предотвратить какие-либо вещи в области просмотра

if (window.outerWidth > window.outerHeight) {
    //Landscape
}

Answer 2

Возможно, вы захотите использовать screen.width и screen.height, так как они не учитывают видимость клавиатуры или нет, она просто возвращает размеры области просмотра.

let screenOrientation = () => {
  return screen.width > screen.height ? "landscape" : "portrait";
}