Тема
- #Мобильная веб-разработка
- #Кроссбраузерная совместимость
О двух головных проблемах кросс-браузерной совместимости, с которыми я столкнулся при разработке мобильной веб-версии, и других моментах, которые необходимо учитывать
я хочу сделать запись.
Проблема расчета высоты viewport из-за собственной адресной строки и навигационной панели браузера
В Safari и Samsung Internet в браузере есть собственная нижняя навигационная панель. Если специально не задано show/hide, то при прокрутке вниз она появляется, а при прокрутке вверх исчезает.
Проблема в том, что из-за этого viewport не фиксируется и изменяется.
Например, если задана высота 100vh, то при отсутствии навигационной панели макет отображается корректно, но при появлении навигационной панели она перекрывает элементы UI.
Чтобы решить эту проблему,
1. Используйте dvh.
Dvh — это динамический viewport, автоматически адаптирующийся к изменению высоты viewport. Таким образом, можно реагировать на изменения макета UI в зависимости от наличия адресной строки или нижней навигации.
2. Можно также рассмотреть svh.
Svн — это высота области UI без учета адресной строки или навигации. В ситуациях, когда предполагается появление адресной строки или навигации, использование svh будет более точным.
Проблема смещения UI из-за виртуальной клавиатуры при выборе (фокусировке) input
В мобильной версии Safari при выборе input из-за виртуальной клавиатуры возникла проблема смещения существующих элементов UI. В других браузерах виртуальная клавиатура обычно отображается как absolute, но в мобильной веб-версии Safari она занимает место, как будто применен display: block.
В Safari при появлении виртуальной клавиатуры высота viewport динамически изменяется, что приводит к перерасчету элементов, использующих vh, и вызывает проблему. Чтобы решить это,
1. Используйте min-height.
Фиксируется высота, чтобы предотвратить смещение UI.
2. Примените префиксы поставщиков. (Подробно описано ниже)
Добавьте атрибут, который применяется в определенных браузерах, таких как Safari.
3. Динамически управляйте viewport с помощью JavaScript.
* Этот способ не рекомендуется. Мгновенное изменение высоты прокрутки приводит к мерцанию макета.
На событие resize вешается обработчик, который отслеживает изменения viewport и применяет соответствующий стиль.
3-1. Управляйте положением при возникновении события focusin.
3-2. Управляйте положением при появлении виртуальной клавиатуры. (В примере ниже используется добавление класса)
Наиболее желательно решить проблему только с помощью CSS, но если вышеуказанные методы не помогли, проверьте, является ли элемент с position: absolute или fixed, и попробуйте изменить CSS, удалив атрибуты top, right, left, bottom.
Другое
Я также нашел несколько моментов, которые следует учитывать при разработке мобильной веб-версии для Safari.
1. При использовании некоторых атрибутов используйте префиксы поставщиков.
* Префиксы поставщиков — это префиксы, которые позволяют браузеру понимать и обрабатывать определенные атрибуты CSS, гарантируя, что CSS, реализованный по-разному в разных браузерах, будет работать как задумано. Это обеспечивает согласованность между браузерами и совместимость со старыми версиями браузеров.
Типы
-webkit-: Chrome, Safari и т.д.
-moz-: Mozilla Firefox
-ms-: Internet Explorer и Edge
-o-: Opera
Типичные атрибуты, для которых требуются префиксы поставщиков, приведены ниже.
Кроме того, Safari ограничивает объем LocalStorage и SessionStorage примерно 5 МБ, и важно отметить, что пространство хранения не совместно используется между вкладками.
Комментарии0