Как рассчитать высоту видимой области (т.е. Высоту окна минус адрес и полосы закладок) в мобильном Safari для веб-приложения?

Каков правильный способ рассчитать, сколько видимого пространства доступно на мобильном Safari? В области просмотра мы имеем в виду количество экрана, фактически доступного для веб-приложения, то есть высоту окна за вычетом адреса и закладок.

iOS 7 предотвращает скрытие адресной строки, и нам нужно правильно учитывать высоту области просмотра.

Ответы

Ответ 1

window.innerWidth и window.innerHeight будут отображаться ширина и высота окна просмотра.

Ответ 2

Я знаю, что это 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();

Ответ 3

Установите 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 при изменении размера окна (например, при использовании на рабочем столе).