#html #google-chrome #mobile #scroll #css-position
#HTML #google-chrome #Мобильный #прокрутка #css-позиция
Вопрос:
Я только начал работать над проектом и заметил, что при тестировании его в Chrome на мобильной iOS, похоже, возникла проблема с моей исправленной панелью навигации. Что расстраивает, так это то, что сначала я подумал, что это, возможно, ошибка в браузере, но, проверив прошлые проекты, они, похоже, не имеют проблем с фиксированным свойством и ведут себя так, как вы ожидаете.
Похоже, что происходит то, что исправленная панель навигации скрывается под адресной строкой браузера, когда вы начинаете прокручивать вниз. Я прикрепил изображение, чтобы, надеюсь, объяснить, что я имею в виду.
Затем я подумал, что это может быть конфликт со сценарием или таблицей стилей, поэтому я удалил свой шаблон до голых костей, и, похоже, он все еще ведет себя так же.
Кто-нибудь сталкивался с этим. Есть ли проблема с моими мета-тегами. Я пробовал разные варианты, и, похоже, он все еще делает то же самое. Любая помощь приветствуется.
Мой урезанный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=2, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div style="background: red; position:fixed;
top: 0;
left:0;
width:100%;
z-index: 1030; height: 80px;">
</div> <main class="main-content">
<div style="height: 1950px;"></div>
</main>
</div><!-- /wrapper -->
</body>
</html>
Красная панель навигации в два раза больше высоты, которую вы видите на прикрепленном изображении. Верхняя половина начала скрываться за адресной строкой браузера.
Ответ №1:
На самом деле есть проблема с IOS и position: исправлено.. Я решил этот путь.. Я хотел бы быть полезным и для вас:
* {box-sizing:border-box;}
body {
height:100vh;
max-height:100vh;
min-height:100vh;
overflow: hidden;
position:relative;
}
#wrapper {
padding-top: 80px;
height:100vh;
max-height:100vh;
min-height:100vh;
overflow-y:auto;
overflow-x:hidden;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=2, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div style="background: red; position:absolute;
top: 0;
left:0;
width:100%;
z-index: 1030; height: 80px;">
</div>
<main class="main-content">
test
<div style="height: 1950px;"></div>
</main>
</div><!-- /wrapper -->
</body>
</html> Все дело в том, что я полагался на абсолютную позицию вместо фиксированной позиции
Комментарии:
1. Большое вам за это спасибо. Я попробую и посмотрю, поможет ли это мне. Что меня смущает, так это то, что у меня есть другие сайты, у которых, похоже, нет проблемы с position: исправлено. И приведенный выше пример, похоже, подходит для Safari iOS. Похоже, проблема в Chrome. Я подумал, что это также может быть связано с выпадающей опцией обновления, которая влияет на размер окна просмотра.
2. Что касается меня, то со мной дважды случалась одна и та же проблема на двух разных веб-сайтах, пока я действительно не понял, что в IOS была проблема с исправленной позицией .. возможно, версия браузера является причиной
3. Вы сталкиваетесь с той же проблемой и в Safari?
4. Да, Safari тоже
5. Вышесказанное действительно работает. Я также обнаружил, что это решение (с использованием -webkit-fill-available) является эффективным: css-tricks.com/css-fix-for-100vh-in-mobile-webkit