Краткое изложение проблем страниц h5 на разных устройствах ios

внешний интерфейс

Недавно я пишу страницу h5, встроенную в веб-просмотр апплета, которая является функцией комментария к статье.Во время этого процесса я столкнулся со многими проблемами совместимости, и производительность на разных моделях также очень непоследовательна, поэтому я резюмирую следующие проблемы. : Запишите это для последующего просмотра

1. Дата выпуска

Для гггг-мм-дд чч:мм:сс этот формат не распознается в системе ios

Когда время отформатировано, оно хорошо обрабатывается на стороне браузера, но на стороне мобильного телефона оно становится NAN или null.В этом случае система ios не может преобразовать этот тип времени.

`let date = new Date('2019-02-28 18:33:24');    // null`

Решение состоит в том, чтобы преобразовать его в формат гггг/мм/дд чч:мм:сс.

replace(/\-/g, "/")

2. Клавиатура сворачивается, страница застревает, обратно не падает

На ios12 обнаружено, что при сворачивании клавиатуры страница залипает, оставляя пустое место внизу.Если немного сдвинуть страницу, то она восстановится.

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

window.scrollTo(0, scroll);

Но есть очень серьезная проблема: если на странице есть кнопки, которыми нужно оперировать Например, поле ввода комментария + кнопка публикации, после ввода текста нажмите «опубликовать», при срабатывании события клика страница сначала вызовет событие размытия, клавиатура отступит, а затем все быть законченным. . . . Нажатия кнопок не имеют никакого эффекта.

Решение. Эту проблему можно решить, заменив событие click на ontouchstart. Событие ontouchstart лучше, чем событие размытия

3. В веб-просмотре апплета WeChat в ios12 клавиатура убрана, а низ страницы останется пустым

Предполагается, что эта проблема вызвана настройкой прокрутки страницы auto.

Решение: Прокрутите страницу, перейдите по ссылке ниже, код работает.

решения, найденные в Интернете

4. Исправление iphone не удается, что приводит к смещению курсора текстовой области на некоторых машинах.

решение: фиксированное меняется на абсолютное, Все родственные элементы становятся абсолютными, Переполнение родительского элемента: авто;

父元素：
  height: 100vh;
  position: relative;
  overflow: auto;
  
兄弟元素：
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: visible;
  overflow-y: auto;
  z-index: 1;

5. Клавиатура закрывает поле ввода

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

решение:

1. Откажитесь от использования фиксированного макета. Если страница прокручивается, лучше отказаться от абсолютного. Если вы хотите использовать абсолютный, обратитесь к предыдущему смещению курсора.

2. Использование гибкой верстки не идеально, но это тоже решение

Используйте гибкий макет, чтобы решить проблему, связанную с тем, что поле ввода ios заблокировано клавиатурой.

Конечно, если вы столкнулись с вышеуказанными проблемами, это означает, что дизайн продукта очень неразумен.При необходимости вам нужно изменить дизайн и перейти на дизайн, в котором ввод не нужно нажимать на клавиатуру.Эти совместимые решения не идеальны для решения проблемы всех моделей. В существовании этих проблем нет нашей вины.Мы надеемся, что студенты, столкнувшиеся с проблемами, не будут отказывать себе, больше общаться, и в то же время стараться направлять продукт в хороший продукт.

Категории