Раньше, когда я работал над ПК, я тоже сталкивался с проблемами совместимости, но, честно говоря, все, что у меня было на уме, это проблемы IE, и не на что было обращать особое внимание. Может быть, это было потому. У меня не получалось подводить итоги. Сейчас я работаю над мобильной стороной (изначально я думал, что мобильная часть очень легкая, поэтому не отнесся к этому серьезно), так что я ошибался, я поплатился за свое презрение и наглость!
Недавно я столкнулся с некоторыми ошибками совместимости и нашел информацию в Интернете.
Давайте сначала поговорим о области просмотра
Сначала шаблон
<meta charset=utf-8><!--Основная цель — заставить ширину документа и ширину устройства оставаться 1:1 с максимальной шириной 1,0 и запретить масштабирование экрана. --><meta content=width=device-width, Initial-scale=1.0, Maximum-scale=1.0, user-scalable=no name=viewport><!--Это также частная торговая марка iPhone, позволяющая работать в полноэкранном режиме. просмотр. --><meta content=yes name=apple-mobile-web-app-capable><!--Частная торговая марка iphone, стиль строки состояния в верхней части iphone. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--Отключить автоматическую идентификацию номеров как номеров телефонов. Это более полезно, поскольку будет отображаться строка цифр. как и синий, стильные дополнения к другим цветам также неэффективны. --><meta content=telephone=no name=format-detection><!--Отключить распознавание электронной почты--><meta content=email=no name=format-detection>
При написании фоновых изображений лучше всего добавлять верхний левый или 0 0, иначе при написании эффектов движения можно легко перепрыгнуть.
Копирование и выделенный текст запрещены
.el { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none;Существует ошибка в фиксированном позиционировании мобильных телефонов Apple. Проверьте, есть ли в HTML и теле тега overflow-x:hidden;
Установите специальные стили для мобильных телефонов с разными размерами экрана.
@media only screen и (min-device-width: 320px) и (max-device-width: 375px){}Поддержка событий ввода, нажатия клавиш и нажатия клавиш в IOS не очень хороша. Однако после ввода с использованием метода ввода в мобильном браузере iOS можно использовать ввод для отслеживания событий нажатия клавиш. браузере, нажатие клавиш не отвечает сразу. На события можно ответить только после удаления.
Метод: вы можете использовать событие oninput html5 для замены клавиатуры.
<input type=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< /скрипт>Настройка стиля кнопки ввода на iOS будет переопределена стилем по умолчанию.
Решение заключается в следующем:
input,textarea {граница: 0; -webkit-appearance: none;}Макет Flex не поддерживает атрибут flex-wrap:wrap для более ранних версий Android, но система iOS поддерживает атрибут переноса строк. Как решить эту проблему? Конечно, не используйте разрывы строк и используйте вместо них другие методы.
.box{ display: -webkit-box; /* Синтаксис старой версии: браузер Safari, iOS, Android, старые браузеры WebKit */ display: -moz-box; /* Синтаксис старой версии: Firefox (ошибочно) */ display: -ms-flexbox; /* Синтаксис смешанной версии: IE 10 */ display: -webkit-flex; /* Синтаксис новой версии: Chrome 21+ */ display: flex; 12.1, Firefox 22+ */}Атрибут заполнителя ввода будет располагать текст вверх.
line-height: (такая же высота, как и поле ввода) --- Решение для ПК
line-height: нормальный ---Мобильное решение
После ввода типа=числа на стороне ПК появляются стрелки вверх и вниз.
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important Margin: 0;}Включите мобильные телефоны Android и iOS, чтобы открыть камеру и выбрать функцию фотоальбома.
<input class=js_upFile Cover1 type=file name=cover Accept=image/* capture=camera Multiple/>$(function () { //Получаем userAgent браузера и преобразуем его в нижний регистр var ua = navigator.userAgent.toLowerCase() ; //Определяем, является ли это телефон Apple, если да, то var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); если (isIos) { $(input:file).removeAttr(capture };})Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.