У меня есть следующий демо-сайт: http://woohooo.fortleet.com/
Части контента, а также навигация настроены на 100% высоты. Когда я нахожусь на своем телефоне, вот этот URL-адрес вверху, который скрывается, когда я прокручиваю вверх. Тем не менее, этот эффект разрушает 100% -ную высоту, потому что он настраивается на новый размер браузера, создавая неприятный эффект. То же самое относится к единицам "vh" и "vw".
Я пробовал следующее:
function windowDimensions() {
if (html.hasClass('touch')) {
height = window.screen.height;
width = window.screen.width;
} else {
height = win.height();
width = win.width();
}
}
function screenFix() {
if (html.hasClass('touch')) {
touch = true;
nav.css({'height' : height + 'px'});
home.css({'height' : height + 'px'});
header.css({'height' : height/2 + 'px'});
content.css({'min-height' : height + 'px'});
}
}
Это, однако, создает проблему, потому что в VERY TOP есть эта панель с батареей, Wi-Fi, информация о сигнале, которая также учитывается на высоте экрана, делая элементы "100%" и "vh" немного большими.
Я не мог поверить, что не нашел другого вопроса об этом, поскольку я предположил, что это довольно распространенная проблема для 100%/100% сайтов.
Вы, ребята, знаете какое-либо решение для этого?