Блог

Я создаю веб-приложение для мобильных устройств, используя NuxtJS. Ожидаемое поведение состоит в том, чтобы страница занимала весь экран без прокрутки. Он отлично работает в разработке, но когда я пробую его на реальном устройстве, адресная строка Chrome вызывает небольшую прокрутку.

Я видел такого рода советы, которые можно добавить height: 100% к html body тегу и.

Даже при этом кажется, что мой дисплей переполняет страницу, когда отображается адресная строка.

Как я мог бы исправить это, не скрывая адресную строку (похоже, что это хакерское решение, предпочтительнее было бы использовать CSS)?

 html,
body,
#__nuxt,
#__layout {
  height: 100%;
}
 

Такого рода проблемы хорошо известны и действительно довольно раздражают.
Для этого в Интернете существует множество возможных взломов, и в настоящее время разрабатывается новое устройство, подобное vh , но без проблемы с адресной строкой.

В то же время, лучшее решение пока состоит в том, чтобы попробовать что-то вроде этого

 body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}
 

Как показано здесь: https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/