Как вычислить размеры нижней панели в браузере на iPhone (сделать 100vh)?

Question

[triggerfinger]

Как сделать оверлей ровно в размерах видимого экрана в браузере на мобильных устройствах?

Вот пример как по умолчанию, этот желтый оверлей имеет height: 100vh но явно видно что нижняя часть перекрывается этой панелью браузера, и содержимое не по центру. Т.е. браузер эту панель тоже считает частью вьюпорт. Как же тогда сделать размер с вычетом этой панели?

Answer 1

[Alexander Litvinenko]

сделайте снизу зазор на 1-2vh где-то, залейте желтым, небольшое отклонение от вертикального центра небудет заметно.

Comments

[triggerfinger]

Костыль, "где-то" не катит! Я бы с удоволсьвием JS-ом ставил высоту, только непонятно нифига что вычислять??

[Alexander Litvinenko]

triggerfinger, а clientHeight что говорит?

Answer 2

[be_a_man]

Я делаю так.

function is_mobile() {return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));};

function fix100vh() {
	var winHeight = $(window).height();
	if ( is_mobile() ) {
		$('.100vh-fix').css('min-height', winHeight);
	} 
}; fix100vh();