Для моего текущего проекта мне нужно оптимизировать макет страницы в ландшафтном режиме для мобильных устройств. Можете ли вы помочь мне понять, как измеряется размер окна браузера?
Я работаю со смартфоном Android с аппаратными пиксельными размерами 720 x 1280 пикселей.
Портретный режим
В портретном режиме, когда я использую JavaScript для получения document.documentElement.clientWidth и ~ высоты, я получаю результат 980 x 1394.
Когда я использую следующий CSS ...
html {
height: 100vh;
width: 100vw;
}
body {
height: 100%;
width: 100%;
margin: 0;
}
... Инструменты разработки Chrome сообщают, что размер тела 980 x 1546.
Пейзажный режим
В ландшафтном режиме все кажется еще сложнее. В моем тесте я явно установил размеры CSS для всего тега <html> на 100vw x 100vh, а ширину и высоту body на 100%.
Однако JavaScript сообщает о clientWidth и clientHeight как 980 x 460, в то время как инструменты разработки Chrome показывают размеры элементов html и body как 980px x 556px, хотя ни один из этих элементов не заполняет экран ширина или высота.
Элемент <main>, ширина которого установлена на 200vh, а высота установлена на 100vh, заполняет всю ширину экрана в ландшафтном режиме, но оставляет зазор в вертикальном направлении, несмотря на то, что Chrome сообщает, что он имеет размеры 1112px x 556px.
Также было бы очень полезно узнать, что именно измеряют различные размерные свойства, чтобы я мог понять, как их следует использовать.
EDIT:
Чтобы ответить на @Kaddath: Нет, я не настроил метатег viewport. Когда я добавляю тег <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">, размеры меняются. В частности, `` clienttWidth в портретном режиме становится шириной экрана в аппаратных пикселях, разделенной на devicePixelRatio, что имеет смысл. clientHeight - это высота экрана в пикселях CSS, за вычетом высоты панели приложения и встроенной панели кнопок.
В портретном режиме значения clientWidth и clientHeight не так просто объяснить.
