1. Значение new Date() равно NAN на IOS.
Например, мы часто используем new Date() для получения метки времени.
new Date("2017-08-11 12:00:00");
Но в IOS значение, полученное с его помощью, равно NAN.причина: поскольку новая Date() в IOS не поддерживает символ "-"Решение: заменить «-» на «/». Например
new Date("2017-08-11 12:00:00".replace(/-/g, "/"));
2. Некоторые модели Android используют высоту и высоту строки для установки центра по вертикали, но проблема будет отображаться на верхней стороне.
В процессе разработки, когда мы хотим, чтобы текст располагался по центру по вертикали, мы часто устанавливаем для этого такие значения, как высота и высота строки. Этот метод не вызывает проблем со стороны ПК, но при тестировании на реальной машине будет обнаружено, что некоторые модели Android будут иметь проблему с высоким текстом.причина: Похоже, что у некоторых моделей Android есть своя высота строки по умолчанию, и высота строки, которую мы установили дополнительно, не работает.Решение: Установите line-height: normal, а затем установите центрирование с помощью отступов.
line-height：normal; padding:xxpx 0;
3. фиксированный и входной
Друзья, которые плохо знакомы с мобильной веб-разработкой, должны были услышать, как их предшественники говорили: не используйте фиксированное позиционирование на страницах с входными тегами, потому что, когда они вместе, всегда будут странные проблемы. В iOS при нажатии на метку ввода, чтобы получить фокус для вызова программной клавиатуры, фиксированное позиционирование временно не работает или может быть понято как абсолютное позиционирование.На странице с прокруткой узел фиксированного позиционирования и другие узлы прокручиваются вместе . На самом деле, эту проблему также легко решить.Пока родительский узел узла с фиксированным позиционированием не может быть прокручен, даже если фиксированное позиционирование не удастся, он не будет прокручиваться с другими узлами прокрутки, что влияет на интерфейс. Но кроме того, есть еще много трудноразрешимых подводных камней, например, после пробуждения софт-клавиатуры Android метка ввода блокируется, и пользователь не может видеть введенную им строку, в iOS нужно ввести хотя бы один символ перед соответствующим тегом ввода прокручивается до соответствующей позиции, поэтому, чтобы избежать этих неразрешимых ям, попробуйте заменить fixed на absolute или flex на страницах с вводом формы.
4, предотвратить веб-страницы с мобильного телефона от увеличения и сужения.
настройки области просмотра не масштабируются
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
5. Внутренняя тень поля ввода по умолчанию под iphone и ipad
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
6. Некоторые телефоны Android имеют закругленные углы, которые не работают.
background-clip: padding-box;
7. Мобильная задержка клика 300 мс
решение
-
Установите метатеги, чтобы отключить масштабирование
<meta name="viewport" content="user-scalable=no"> <meta name="viewport" content="initial-scale=1,maximum-scale=1"> -
FastClick
FastClickдаFT LabsОблегченная библиотека, специально разработанная для решения проблемы задержки клика в 300 мс в мобильных браузерах. Принцип реализации FastClick заключается в том, что при обнаружении события касания он немедленно имитирует событие щелчка через пользовательское событие DOM и блокирует событие щелчка браузера через 300 мс.
Проблемы, которые может вызвать FastClick
8. Проблемы со ссылками
Решение первое: Это очень просто. На гитхабе есть fastclick, который прекрасно решает эту проблему. Внедрите fastclick.js, потому что исходный код fastclick не зависит от других библиотек, поэтому вы можете добавить его непосредственно перед нативным js
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
Решение второе: В случае, когда сам элемент B имеет событие щелчка по умолчанию, поведение по умолчанию preventDefault() для элемента A touchend, когда событие касания заменяется на touchend, должно использоваться для предотвращения генерации события щелчка.
$("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
9. Распознавание номера телефона
Номера, которые выглядят как номера телефонов, обрабатываются как телефонные ссылки в 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>
10. Распознавание почтового ящика
Android распознает строки, соответствующие формату почтового ящика. Мы можем управлять автоматической идентификацией различных почтовых ящиков с помощью следующей мета:
<meta content="email=no" name="format-detection" />
Точно так же мы также можем включить функцию длительного нажатия на адрес электронной почты, чтобы вызвать функцию отправки электронной почты через атрибут label:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
11. Настройки общих метатегов
Для некоторых специальных атрибутов мобильного терминала мета может быть установлена сама по себе по мере необходимости.
<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应用模式
12. Очистить тень в поле ввода
В iOS поле ввода по умолчанию имеет внутреннюю тень, чтобы закрыть его следующим образом:
div {
-webkit-appearance: none;
}
13. Цвет шрифта поля ввода по умолчанию
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;
}
14. Пользователь установил размер шрифта, чтобы увеличить или уменьшить ошибку макета страницы.
Установите шрифт, чтобы отключить масштабирование
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
15. Элемент Android щелкнут, чтобы создать границу
Некоторые системы Android щелкают ссылку, и появляется рамка или полупрозрачная серая маска, и эффект отличается в зависимости от определения разных производителей. Код удаления выглядит следующим образом
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
}
16. Автовоспроизведение аудио и видео в ios и andriod
Это не ошибка, потому что автоматическое воспроизведение аудио или видео на веб-странице принесет пользователю некоторые проблемы или ненужное потребление трафика, поэтому системы Apple и Android обычно запрещают автоматическое воспроизведение и используют воспроизведение, запускаемое JS, что необходимо сделать. пользователем. Триггер для воспроизведения. Добавьте код, который автоматически запускает воспроизведение
$('html').one('touchstart', function() {
audio.play()
})
17 Раскрывающийся список границ выдвижения iOS отображается пустым
Нажмите и удерживайте палец на экране, чтобы потянуть вниз, и в верхней части экрана появится белая область. Нажмите и удерживайте палец на экране и потяните вверх, внизу появится лишняя белая область.
В iOS перетаскивание пальца вверх и вниз по экрану вызовет событие touchmove. Объектом, запускаемым этим событием, является весь контейнер веб-просмотра, контейнер, естественно, будет перетаскиваться, а остальное будет пустым.
document.body.addEventListener(
'touchmove',
function(e) {
if (e._isScroller) return
// 阻止默认事件
e.preventDefault()
},
{
passive: false
}
)
18 проблем совместимости onkeyUp и onKeydown
Поддержка событий ввода с клавиатуры, keyup, keydown и т. д. в IOS не очень хороша.Использование ввода для отслеживания событий нажатия клавиатуры не является проблемой в мобильных браузерах Android, но после ввода с помощью метода ввода в мобильных браузерах ios события keyup не немедленно соответствующий
19 В поле ввода 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()
}
}
20 Когда клавиатура 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);
})
21. Причина, по которой исправлено не работает под 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%;
}