предисловие
После прошлой статьи собрал вторую волну распространенных мобильных багов и их решения от разных мелких партнеров.Некоторые решения могут быть неточными или проблемными.Надеюсь,что есть правильные решения давать комментарии.
Примечание: Ошибки в этой статье собраны в Интернете, и решения могут быть неточными.Вы можете предоставить более полные решения.
Рекомендуемое время чтения: 10-15 минут
fastclick вызывает конфликт фокуса раскрывающегося списка
В: После использования fastclick на мобильном терминале в среде ios появляется несколько последовательных раскрывающихся списков.Первое поле выбора внезапно заполняет содержимое второго раскрывающегося списка.
A: Основная причина заключается в том, что Fastclick вызывает множественный выбор в IOS, и когда один щелкает один, фокус продолжает меняться. Измените исходный код, оцените, является ли устройство IOS в событии onTouchStart, а затем оцените, выбрано ли текущее имя узла, если оно возвращает false, чтобы предотвратить выполнение fastClick других событий.
исходный адрес гитхаба:fastclick.js
//line 391行
FastClick.prototype.onTouchStart = function(event) {
//在其方法中添加判断 符合ios select的时候 不返回事件
if(deviceIsIOS&&this.targetElement =="select")
this.targetElement = null
event.preventDefault();
}
//line521 或者讲源码中 有关touchEnd判断非ios或者非select的事件注释，
if (!deviceIsIOS || targetTagName !== 'select') {
this.targetElement = null;
event.preventDefault();
}
ввод ios не может получить фокус автоматически
В: Как следует из названия, я надеюсь, что поле ввода может автоматически получать фокус при отображении определенной страницы.
Решение:document.addEventListener('touchstart',function(e){document.getElementById('focus').focus();});Вы не можете инкапсулировать фокус и активировать его, это также недопустимо.
Примечания: Конкретный эффект реализации еще предстоит проверить, и я надеюсь, что у меня будет время проверить дополнительные возможные проблемы и дополнительные решения.
Удалить Scrollbar по умолчанию WebKit
В: Как в названии Решение:
element::-webkit-scrollbar{
    display:none
  }
видео не воспроизводится автоматически
В: Как в названии Решение: (1) Autoplay и js управляют воспроизведением, некоторые устройства по-прежнему не работают (2)
$("html").one("touchstart",function(){
      video.play();
    })
После того, как элемент встроенного блока использует вертикальное выравнивание, высота родительского элемента необъяснимо растягивается.
В: Как и заголовок, он не обязательно появляется на мобильном терминале, но мобильный терминал будет иметь более серьезное влияние.Как правило, он используется для установки вертикального центра однорангового контента. Решение:
.par{
   font-size:0
  }
Фоновое изображение не адаптивно
В: Как в названии A: Решение: используйте размер фона
element{
   background-size:100% 100%;
  }
Дочерние элементы элемента css3 translate3d мерцают после эффекта перевода
Q: Элемент label после применения эффекта перевода css3 translate3d появится в сафари на ios и веб-просмотре приложения, а его дочерние элементы будут мигать после загрузки страницы.Подробности следующие:
<ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
<li><img src=”http://pic2.58.com/m58/m3/img/imglogo_gray.png” ref=”http://1.pic.58control.cn/p1/big/n_22998799743506.jpg”></li>
</ul>
Решение: 1. Вы можете единообразно добавить одни и те же атрибуты к его дочерним элементам следующим образом:
<ul style=”-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; “>
<li style=”-webkit-transform: translate3d(0, 0, 0); “><img src=”http://pic2.58.com/m58/m3/img/imglogo_gray.png” ref=”http://1.pic.58control.cn/p1/big/n_22998799743506.jpg”></li>
</ul>
2. Добавьте к его элементу следующие атрибуты: -webkit-backface-visibility: hidden; (устанавливает, будет ли видна задняя часть переходного элемента, если смотреть на пользователя: hidden) -webkit-transform-style: save-3d; (устанавливает, как встроенные элементы отображаются в 3D-пространстве: сохранить 3D)
позиция: фиксированный фиксированный эффект
В: При добавлении position:fixed к указанному элементу после первой загрузки страницы сдвиньте всю страницу, и элемент с этим стилем будет прокручиваться вместе со страницей (цель — зафиксировать этот элемент).
Решение:
Просто добавьте следующие свойства css к его элементам:-webkit-transform：translate3d(0,0,0)
Примечания: это решение может быть неэффективным и требует последующей проверки или лучшего решения.
Ввод букв с клавиатуры IOS, первая буква по умолчанию заглавная
В: Как в названии Решение:
<input type="text" autocapitalize="off" />
выбрать раскрывающийся выбор установить выравнивание по правому краю
В: Судя по заголовку, по умолчанию выравнивание по левому краю, у продукта другие требования Решение:
select option {
direction: rtl;
}
Наклонная деформация через преобразование, вращение при вращении вызовет зазубрины
В: Как в названии Решение:
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)
Задержка мобильного клика
В: Как в названии A: Решение: ссылка на fastclick.js
проблема проникновения мобильной связи
Q: Как следует из заголовка, при нажатии абсолютно позиционированного элемента, несмотря на то, что элемент ниже закрыт, он также срабатывает. A: Причина в том, что touchstart раньше, чем touchend, и раньше, чем click. То есть есть задержка срабатывания клика.Это время около 300мс, значит маска скрывается после срабатывания тапа.В это время клик не сработал.После 300мс,т.к. маска скрыта, наш щелчок срабатывает на следующую ссылку. решение:
（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
（2）用fastclick，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a标签的click
（4）延迟一定的时间(300ms+)来处理事件 （不推荐）
（5）以上一般都能解决，实在不行就换成click事件。
Что касается системы iOS, при вводе английского языка с помощью китайского метода ввода между буквами может появиться шестой пробел.
В: Как в названии A: Решение: заменить на обычный
this.value = this.value.replace(/\u2006/g, '');
Граница 1px для экрана Retina
В: Как в названии Решение:
Element{
border-width: thin;
}