Не используйте 100vh для мобильной отзывчивости

Обычно мы используем height:100vh для полноэкранного макета, что является простым хаком и удобным способом получить лучший дизайн.

Пример

.content {
   height: 100vh;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Но когда мы тестируем наш дизайн на реальном устройстве, мы сталкиваемся с несколькими проблемами:

  • В основном браузеры Chrome и Firefox на мобильных устройствах имеют пользовательский интерфейс (адресная строка и т.д.) в верхней части.
  • В Safari адресная строка находится внизу.
  • Разные браузеры имеют разные размеры области просмотра.
  • Мобильные устройства рассчитывают область просмотра браузера как (верхняя панель + документ + нижняя панель) = 100vh
  • Весь документ заполняет страницу, используя 100vh

Проблемы

  • В Chrome

Обнаружены проблемы с полосой прокрутки. Плохой пользовательский поток и затрудненная навигация по содержимому.

Примечание: Я также протестировал эту проблему в Safari, что еще больше ухудшает пользовательский поток.


Решения

Определить высоту приложения с помощью JS

Установите высоту страницы (используя javascript) с помощью свойства window.innerheight.

const documentHeight = () => {
 const doc = document.documentElement
 doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(resize, documentHeight)
documentHeight()
Вход в полноэкранный режим Выход из полноэкранного режима

С помощью переменной CSS

:root {
 --doc-height: 100%;
}

html,
body {
 padding: 0;
 margin: 0;
 height: 100vh; /* fallback for Js load */
 height: var(--doc-height);
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Здесь функция documentHeight устанавливает новое свойство стиля var(‘–doc-height’) и включает текущую высоту окна.


Окончательные результаты

Браузер Chrome

Примечание: Теперь нет никаких вертикальных дополнительных полос прокрутки, также нет проблем и в Safari. Нижняя адресная строка в Safari всегда находится внизу, что обеспечивает хороший поток пользователей на сайт.


Заключение
👏👏 Пройдя этот путь, я надеюсь, вы сможете решить проблемы с экраном просмотра на мобильных устройствах. Итак, я предлагаю вам попробовать это на вашем проекте и наслаждаться этим!

Не стесняйтесь делиться своими мыслями и мнениями и оставьте мне комментарий, если у вас возникнут какие-либо проблемы или вопросы.

До тех пор,
продолжайте взламывать, будьте здоровы

Оцените статью
Procodings.ru
Добавить комментарий