Недавно я писал страницу h5, встроенную в мини-программу веб-просмотра, которая представляет собой функцию комментариев к статьям. В процессе я столкнулся со многими проблемами совместимости, а производительность на разных моделях также была очень нестабильной, поэтому я резюмировал следующие проблемы. : Запишите это, чтобы просмотреть позже.
1. Проблема с датойДля гггг-мм-дд чч:мм:сс этот формат не распознается системой iOS.
Когда время отформатировано, оно хорошо обрабатывается на стороне браузера, но на мобильном телефоне оно становится NAN или нулевым. В этом случае система iOS не может преобразовать этот тип времени.
let date = new Date('2019-02-28 18:33:24');Решение состоит в том, чтобы преобразовать его в формат гггг/мм/дд чч:мм:сс.
заменить(//-/г, /)2. Клавиатура убирается а страница застревает и не возвращается.
На ios12 я обнаружил, что при втягивании клавиатуры страница зависает, оставляя нижнюю часть пустой. Если слегка сдвинуть страницу, она восстановится.
Для такого рода проблем я проверил множество решений в Интернете. Решение примерно такое: прокручивать страницу во время события размытия.
window.scrollTo(0, прокрутка);
Но есть очень серьезная проблема: если на странице есть кнопки, которыми нужно управлять, например поле ввода комментария + кнопка публикации, то после ввода текста нажимаем опубликовать, и при срабатывании события клика страница сначала вызовет событие размытия, и клавиатура отступит. Затем все было кончено. . . . Нажатие кнопки ничего не дает.
Решение. Изменение события щелчка на ontouchstart может решить эту проблему. Событие ontouchstart лучше, чем запуск события щелчка
3. В веб-просмотре апплета WeChat в ios12 клавиатура убрана, а нижняя часть страницы будет пустой.Предполагается, что эта проблема вызвана автоматической настройкой прокрутки страницы.
4. Исправление iPhone не удалось, из-за чего на некоторых машинах курсор текстовой области смещался.Решение: все родственные элементы становятся абсолютными, а родительский элемент переполняется:auto;
Родительский элемент: высота: 100vh; положение: относительное; переполнение: авто; одноуровневые элементы: верхнее: 0; нижнее: 0; правое: переполнение-y: авто; отступ-дно: 10 пикселей z-индекс: 1;5. Клавиатура блокирует поле ввода.
Если поле ввода зафиксировано внизу с помощью фиксированного, то при поднятии клавиатуры исправление не удастся на iPhone, что приведет к прокрутке страницы. Поле ввода будет прокручиваться вместе со страницей, а на некоторых моделях поле ввода будет прокручиваться. иногда блокируется клавиатурой. Это периодические проблемы, очень недружелюбно.
Решение: откажитесь от фиксированного макета. Если на странице есть прокрутка, откажитесь от абсолютного. Если вы вынуждены использовать абсолютный макет, обратитесь к предыдущей статье о смещении курсора.
Рекомендуется использовать гибкий макет, и совместимость будет решена.
Конечно, если вы столкнулись с вышеперечисленными проблемами, это означает, что конструкция продукта очень неразумна. При необходимости вам все равно придется изменить дизайн на дизайн, в котором ввод не нужно нажимать вверх с помощью клавиатуры. Эти решения по совместимости. не идеальны. Решают проблемы всех моделей.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.