Предложены решения проблем расчета высоты viewport и смещения UI из-за виртуальной клавиатуры, возникших в браузере Safari во время разработки мобильных веб-приложений.
Проблема с высотой viewport может быть решена с помощью dvh или svh, проблема с виртуальной клавиатурой — с помощью min-height, добавления префиксов поставщиков и динамического управления с помощью JavaScript.
При разработке мобильных веб-приложений для Safari необходимо учитывать использование префиксов поставщиков, ограничение размера LocalStorage и SessionStorage (около 5 МБ) и невозможность совместного использования Storage между вкладками.
Я усердно писал статью, нажал кнопку сохранения, и она исчезла с ошибкой 404 ㅠㅠ
Я хочу задокументировать две головные боли, связанные с кросс-браузерной совместимостью, с которыми я столкнулся при разработке мобильной веб-версии, и другие вопросы, которые следует учитывать.
Хочу это записать.
Проблема вычисления высоты viewport из-за собственной адресной строки и панели навигации браузера
В Safari и Samsung Internet есть собственная нижняя панель навигации. Если не заданы специальные параметры show/hide, она появляется при прокрутке вниз и исчезает при прокрутке вверх.
Проблема в том, что из-за этого viewport не фиксируется и меняется.
Например, если высота установлена в 100vh, то при отсутствии панели навигации макет отображается корректно, но если панель навигации появляется, она перекрывает UI.
Чтобы решить эту проблему,
1. Используйте dvh.
dvh — это динамический viewport, который автоматически отражает изменения при изменении высоты viewport. Таким образом, можно адаптироваться к изменениям макета UI в зависимости от наличия адресной строки или нижней панели навигации.
2. Можно также рассмотреть svh.
svh — это высота области UI без учета адресной строки или панели навигации. В ситуациях, когда предполагается появление адресной строки или панели навигации, использование svh будет более точным.
Проблема смещения UI из-за виртуальной клавиатуры при выборе input
В мобильном Safari при выборе input возникла проблема смещения элементов UI из-за виртуальной клавиатуры. В других браузерах виртуальная клавиатура обычно отображается как absolute, но в мобильном веб-браузере Safari она занимает место, как будто к ней применен display block.
В Safari при появлении виртуальной клавиатуры динамически регулируется высота viewport, что приводит к перенастройке элементов, использующих единицы vh. Для решения этой проблемы,
1. Используйте min-height.
Зафиксируйте высоту, чтобы предотвратить смещение UI.
html, body{height:100%;min-height:100vh;/* Установка фиксированной минимальной высоты */overflow: hidden;}
html, body{height: -webkit-fill-available;/* Для Safari */}
Добавьте атрибуты, которые применяются в определенных браузерах, таких как Safari.
3. Динамически управляйте viewport с помощью JavaScript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Код для выполнения, когда появляется клавиатураdocument.body.classList.add('keyboard-visible');}else{// Код для выполнения, когда клавиатура исчезаетdocument.body.classList.remove('keyboard-visible');}});
Навесьте обработчик события resize для обнаружения изменений viewport и примените соответствующий стиль.
3-1. Управляйте положением при возникновении события focusin.
3-2. Управляйте положением при появлении виртуальной клавиатуры (в примере ниже используется класс).
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Виртуальная клавиатура поднятаdocument.body.classList.add('keyboard-visible');}else{// Виртуальная клавиатура опущенаdocument.body.classList.remove('keyboard-visible');}});
В моем случае я решил проблему, используя пункт 3-1. Если пункт 3-1 не работает должным образом, сначала используйте код ниже, чтобы убедиться, что это то, что вы задумали.
Кроме того, я нашел несколько моментов, которые следует учитывать при разработке мобильной веб-версии для Safari.
1. При использовании некоторых атрибутов используйте префиксы поставщиков.
* Префиксы поставщиков — это префиксы, которые позволяют браузеру понимать и обрабатывать определенные атрибуты CSS, обеспечивая корректную работу CSS, реализованного по-разному в разных браузерах. Это позволяет обеспечить согласованность между браузерами и совместимость со старыми версиями браузеров.
Типы
-webkit-: Chrome, Safari и другие -moz-: Mozilla Firefox -ms-: Internet Explorer и Edge -o-: Opera
Типичные атрибуты, для которых требуются префиксы поставщиков, приведены ниже.
.container{display: -webkit-flex;/* Safari */display: flex;-webkit-flex-direction: row;flex-direction: row;}.item{-webkit-flex-grow:1;/* Safari */flex-grow:1;-webkit-flex-shrink:1;/* Safari */flex-shrink:1;}.grid-container{display: -ms-grid;/* IE11 и старые браузеры */display: grid;/* Современные браузеры */}.sticky-element{position: -webkit-sticky;/* Safari */position: sticky;}input[type="text"],select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}
Кроме того, следует помнить, что Safari ограничивает объем LocalStorage и SessionStorage примерно до 5 МБ, и что пространство хранения не совместно используется между вкладками.
P.S. Я очень расстроен, что моя предыдущая статья исчезла. Хотя моя статья не была высокого качества,,,ㅠ Я обязательно должен буду использовать автосохранение.