Каков правильный способ рассчитать, сколько видимого пространства доступно на мобильном Safari? В области просмотра мы имеем в виду количество экрана, фактически доступного для веб-приложения, то есть высоту окна за вычетом адреса и закладок.
iOS 7 предотвращает скрытие адресной строки, и нам нужно правильно учитывать высоту области просмотра.
window.innerWidth и window.innerHeight будут отображаться ширина и высота окна просмотра.
Я знаю, что это 5 лет пост, но эта проблема все еще сохраняется, как я могу сказать. Мой обходной путь: используйте элемент HTML на странице, стилизованный под CSS: .el{ height:100vh; } .el{ height:100vh; } и получить высоту в пикселях в Javascript с помощью jQuery: $('.el').height();
Если у вас нет практического использования такого элемента, вы можете создать его "на лету" с единственной целью - создать область просмотра:
var vh = $('<div style="height:100vh"></div>"').appendTo('body').height();
$('body div:last-child').remove();
Установите height CSS вашего корневого элемента контейнера (пусть назовем его rootElement) rootElement высоте порта вида:
.root-element {
height: 100vh;
}
Затем, когда страница отобразилась, запустите этот код, чтобы обновить высоту rootElement до высоты порта просмотра минус размер панелей пользовательского интерфейса браузера (например, в iOS Safari: верхняя адресная строка, нижняя панель навигации…):
const rootElement = document.querySelector(".root-element")
const viewPortH = rootElement.getBoundingClientRect().height;
const windowH = window.innerHeight;
const browserUiBarsH = viewPortH - windowH;
rootElement.style.height = 'calc(100vh - ${browserUiBarsH}px)';
Это решение устанавливает размер вашего корневого контейнера в соответствии с тем, что доступно, но также позволяет браузеру адаптировать высоту rootElement при изменении размера окна (например, при использовании на рабочем столе).