Обычно мы используем 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 всегда находится внизу, что обеспечивает хороший поток пользователей на сайт.
Заключение
👏👏 Пройдя этот путь, я надеюсь, вы сможете решить проблемы с экраном просмотра на мобильных устройствах. Итак, я предлагаю вам попробовать это на вашем проекте и наслаждаться этим!
Не стесняйтесь делиться своими мыслями и мнениями и оставьте мне комментарий, если у вас возникнут какие-либо проблемы или вопросы.
До тех пор,
продолжайте взламывать, будьте здоровы