Суммируйте общие навыки для разработки мобильных H5 (полный галантереи!)

предисловие

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

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

Мой гитхаб:github.com/Michael-lzg

Базовое введение в систему знаний vue

Основные сведения о JS (1) — Типы данных

Краткое изложение основ JS (2) — прототип и цепочка прототипов

Краткое изложение основ JS (3) — область действия и замыкания

Основная сводка JS (4) - этот пункт и вызов/применение/привязка

Основное резюме JS (5) - механизм выполнения JS и EventLoopd

html статьи

Часто используемые настройки метаатрибутов

Для некоторых специальных атрибутов мобильного терминала META может быть установлена по мере необходимости


<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
<meta name="full-screen" content="yes">             //全屏显示
<meta name="browsermode" content="application">     //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="x5-orientation" content="portrait">     //QQ强制竖屏
<meta name="x5-fullscreen" content="true">          //QQ强制全屏
<meta name="x5-page-mode" content="app">            //QQ应用模式

идентификация номера телефона

Номера, которые выглядят как номера телефонов, обрабатываются как телефонные ссылки в iOS Safari (ни в браузерах, ни в Android), например:

7 цифр, например: 1234567
Номер со скобками и знаком плюс, например: (+86)123456789
Номер двойной соединительной линии, например: 00-00-00111
11 цифр, например: 13800138000

отключить распознавание

<meta name="format-detection" content="telephone=no" />

включить распознавание

<a href="tel:123456">123456</a>

Распознавание электронной почты (Android)

Android распознает строки, соответствующие формату почтового ящика. Мы можем управлять автоматической идентификацией различных почтовых ящиков с помощью следующей мета:

<meta content="email=no" name="format-detection" />

Точно так же мы также можем включить функцию длительного нажатия на адрес электронной почты, чтобы вызвать функцию отправки электронной почты через атрибут label:

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

css статьи

тонкая линия 0,5px

Появляется все больше и больше мобильных проектов H5, а дизайнеры предъявляют все более высокие требования к пользовательскому интерфейсу, например, граница в 1 пиксель. На экране высокой четкости 1 пиксель на мобильной стороне будет толстым.

Так почему возникает эта проблема? В основном это связано с одной вещью, соотношением пикселей устройства DPR (devicePixelRatio), которое представляет собой отношение пикселей устройства к пикселям CSS, когда масштаб по умолчанию равен 100%. Текущий основной экран DPR=2 (iPhone 8) или 3 (iPhone 8 Plus). Возьмем в качестве примера экран 2x, физический пиксель устройства должен достигать 1 пикселя, а DPR=2, поэтому пиксель CSS может быть только 0,5.

Наиболее распространенные способы описаны ниже

/* 底边框 */
.b-border {
  position: relative;
}
.b-border:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 上边框 */
.t-border {
  position: relative;
}
.t-border:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 右边框 */
.r-border {
  position: relative;
}
.r-border:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #d9d9d9;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 左边框 */
.l-border {
  position: relative;
}
.l-border:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #d9d9d9;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/* 四条边 */
.setBorderAll {
  position: relative;
  &:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
  }
}

Блокировать выбор пользователя

Запретить пользователям выбирать текст или изображения на странице

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Очистить тень внутри поля ввода

В iOS поле ввода по умолчанию имеет внутреннюю тень, чтобы закрыть его следующим образом:

div {
  -webkit-appearance: none;
}

Как запретить сохранение или копирование изображений

код показывает, как показано ниже

img {
  -webkit-touch-callout: none;
}

Цвет шрифта по умолчанию для поля ввода

Установите цвет шрифта-заполнителя во входных данных

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

Пользователь увеличивает или уменьшает размер шрифта, что приводит к неправильному макету страницы.

Установите шрифт, чтобы отключить масштабирование

body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

Система Android создает границу при нажатии элемента

Часть системы Android нажимает на ссылку, будет рамка или полупрозрачная серая маска, и разные производители определяют по разному. Удаление кода следующим образом

a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

Свайп iOS не плавный

Скольжение страницы вверх и вниз на мобильном телефоне ios приведет к зависанию, палец оторвется от страницы, и страница немедленно перестанет двигаться. Общая характеристика заключается в том, что скольжение не является плавным и отсутствует инерция скольжения. В iOS 5.0 и более поздних версиях смахивание имеет два определенных значения: автоматическое и сенсорное. Значение по умолчанию — автоматическое.

решение

Добавить метод касания прокрутки в контейнере прокрутки

.wrapper {
  -webkit-overflow-scrolling: touch;
}

установить переполнение Установите для внешнего переполнения значение hidden, а для переполнения элемента содержимого — значение auto. Если внутренний элемент выходит за пределы тела, происходит прокрутка, а часть за пределами тела скрывается.

body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}

js статьи

Щелчок экрана генерации мобильного терминала в ответ на задержку 200-300 мс

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

fastclick может устранить задержку в 300 мс при клике на мобильном телефоне
Сенсорный модуль Zepto, событие касания также предназначен для решения проблемы задержки при нажатии.

Порядок реагирования на сенсорные события

ontouchstart
ontouchmove
ontouchend
onclick

автовоспроизведение аудио и видео в ios и andriod

Это не ошибка, потому что автоматическое воспроизведение аудио или видео на веб-странице принесет пользователю некоторые проблемы или ненужное потребление трафика, поэтому системы Apple и Android обычно запрещают автоматическое воспроизведение и используют воспроизведение, запускаемое JS, что необходимо сделать. пользователем. Триггер для воспроизведения. Добавьте код, который автоматически запускает воспроизведение

$('html').one('touchstart', function() {
  audio.play()
})

Раскрывающийся список границ подтягивания iOS отображается пустым

Нажмите и удерживайте палец на экране, чтобы потянуть вниз, и в верхней части экрана появится белая область. Нажмите и удерживайте палец на экране и потяните вверх, внизу появится лишняя белая область.

В iOS перетаскивание пальца вверх и вниз по экрану вызовет событие touchmove. Объектом, запускаемым этим событием, является весь контейнер веб-просмотра, контейнер, естественно, будет перетаскиваться, а остальное будет пустым.

решение

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

проблема преобразования даты ios с NAN

Замените символ формата строки даты на '/'

'yyyy-MM-dd'.replace(/-/g, '/')

проблема с мягкой клавиатурой

Клавиатура IOS всплывает, чтобы заблокировать исходный вид

Его можно открыть, прослушав мобильную мягкую клавиатуру.

Метод Element.scrollIntoViewIfNeeded(Boolean) используется для прокрутки элементов, которые не находятся в видимой области окна браузера, в видимую область окна браузера. Если элемент уже находится в видимой области окна браузера, прокрутки не произойдет.

true, элемент будет выровнен по центру в пределах видимой области области прокрутки, в которой он размещен.
false, элемент будет выровнен по ближайшему краю видимой области области прокрутки, в которой он находится. В зависимости от того, к какому краю элемента ближе всего видимая область, верхний край элемента будет выравниваться по верхнему краю видимой области, или нижний край элемента будет выравниваться по нижнему краю видимой области.

window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})

Проблемы совместимости onkeyUp и onKeydown

Поддержка событий ввода с клавиатуры, keyup, keydown и т. д. в IOS не очень хороша Использование ввода для отслеживания событий нажатия клавиатуры не является проблемой в мобильных браузерах Android, но после ввода с помощью метода ввода в мобильных браузерах ios события keyup не немедленно соответствующий

В поле ввода IOS12 трудно щелкнуть, чтобы получить фокус, и программная клавиатура не может всплыть

Проблемой позиционирования и поиска является совместимость fastclick.js с IOS 12. В исходный код fastclick.js или main.js можно внести следующие модификации.

FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf('date') !== 0 &&
    targetElement.type !== 'time' &&
    targetElement.type !== 'month'
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}

Когда клавиатура IOS свернута, страница становится бесполезной и падает назад, а нижняя часть остается пустой

Прокрутите до исходной позиции, прослушав время отката клавиатуры.

window.addEventListener('focusout', function() {
  window.scrollTo(0, 0)
})

//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })

Причина, по которой исправлено не работает под IOS

После вызова программной клавиатуры фиксированный элемент страницы станет недействительным и станет абсолютным, поэтому, когда страница превышает один экран и прокручивается, недопустимый фиксированный элемент будет следовать за прокруткой. Он не ограничивается полем ввода типа = текст, вызывается любая программная клавиатура (например, выбор времени и даты, выбор выбора и т. д.), и возникает та же проблема.

Решение: не позволяйте прокручивать страницу, но позволяйте основной части прокручиваться самой, установите высоту основной части на 100%, переполнение: прокрутка

<body>
  <div class='warper'>
    <div class='main'></div>
  <div>
  <div class="fix-bottom"></div>
</body>

.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}