1. При просмотре фоновой картинки с браузером Android, некоторые устройства будут размыты.
Это очень ясно на ПК с той же доли изображений, но на телефоне он очень размыт. В чем причина?
После исследования именно DevicePixelRatio вызвал проблему. Поскольку разрешение мобильного телефона слишком мало, если веб -страница отображается в соответствии с разрешением, слова будут очень маленькими. Таким образом, Apple изначально отобразила разрешение 960640 от iPhone 4 на веб -странице, поэтому DevicePixelRatio = 2. Теперь Android довольно грязный, с 1,5, 2 и 3.
Если вы хотите, чтобы изображение было более четко отображаться на вашем телефоне, вы должны использовать 2 -кратное фоновое изображение вместо тега IMG (как правило, 2 раза). Например, ширина и высота Div составляют 100100, фоновое изображение должно быть 200200 году, а затем размером с фонового размера: содержится;, так что отображаемое изображение будет яснее.
Код может быть следующим:
Фон: url (../ Images/icon/all.png) Центр без повторного оборудования; -Webkit-background-size: 50px 50px; фоновый размер: 50px 50px; дисплей: встроенный блок; Ширина: 100%; Высота: 50px;
Или укажите размер фонового размера: содержать; Либо, пожалуйста, попробуйте!
2. Загрузка изображения
Если вы столкнетесь с проблемой медленной загрузки изображений, в этом случае развитие мобильного телефона обычно использует метод Canvas для загрузки:
Для конкретного API Canvas, пожалуйста, см.
Вот пример холста:
<li> <canvas> </canvas> </li>
JS Динамически загружает картинки и LI. Всего дано 17 картинок!
var total = 17; var zwin = $ (окно); var render = function () {var padding = 2; var winwidth = zwin.width (); var picwidth = math.floor ((упрощение Winwidth*3)/4); var tmpl = ''; for (var i = 1; i <= totla; i ++) {var p = padding; var imgsrc = 'img/'+i+'. jpg'; if (i%4 == 1) {p = 0; } tmpl+= '<li> <canvas id = "cvs _'+i+'"> </canvas> </li>'; var ImageObj = new Image (); ImageObj.index = i; ImageObj.onload = function () {var cvs = $ ('#cvs _'+this.index) [0] .getContext ('2d'); cvs.width = this.width; CVS.Height = this.height; cvs.drawimage (это, 0,0); } imageObj.src = imgsrc; } } оказывать();3. Если мобильный веб -сайт не должен быть совместимым с браузером IE, мы обычно используем Zeptojs . Метод встроенных событий Zeptojs, пожалуйста, обратитесь к http://zeptojs.com/#touch
Я посмотрел на новую версию Zeptio API, которая уже поддерживает браузеры IE10 или выше, и вы можете использовать Zeptojs!
4. предотвратить увеличение и сокращение веб -страниц и сокращения мобильных телефонов . Это самый основной момент. То, что разработчики мобильных веб -сайтов должны знать больше всего, - это настроить Viewport в Meta.
Кроме того, мы увидели следующее заявление на некоторых мобильных сайтах:
Кода -копия выглядит следующим образом:
<! Doctype html public "-// wapforum // dtd xhtml mobile 1.0 // en" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd">
Способ установить DTD - XHTML. Если наша страница использует html5, вы можете напрямую объявить <! Doctype html> без установки DTD.
Используйте ViewPort, чтобы предотвратить масштабирование страницы. Обычно устанавливают пользовательский шкалера на 0, чтобы отключить пользовательское масштабирование представления страницы.
<meta name = "viewport" content = "user-scalbable = 0" />
Но для лучшей совместимости мы будем использовать полные настройки точки зрения.
Кода -копия выглядит следующим образом:
<meta name = "viewport" content = "width = width устройства, начальная масштаба = 1,0, максимальная масштаба = 1,0, пользовательский шкалевой = 0" />
Конечно, пользовательский масштаб = 0, и некоторые люди также пишут пользовательский шкалеровский = нет, оба из которых в порядке.5. Apple-Mobile-Web-App-способность
Apple-Mobile-Web-App-Saveable заключается в том, чтобы установить, работает ли веб-приложение в полноэкранном режиме.
Грамматика:
<meta name = "Apple-Mobile-Web-app-capable" content = "yes">
иллюстрировать:
Если контент установлен на да, веб -приложение будет работать в режиме полноэкранного режима, в противном случае это не так. Значение контента по умолчанию - нет, указывая на нормальный дисплей. Вы можете использовать window windows только для чтения. Navigator.standalone, чтобы определить, отображается ли веб-страница в режиме полноэкранного режима.
6. обнаружение формата
Определение формата включает или отключает номер телефона на странице автоматического распознавания.
Грамматика:
<meta name = "format-detection" content = "telephone = no">
иллюстрировать:
По умолчанию устройство автоматически распознает любую строку, которая может быть номером телефона. Установка телефон = нет может отключить эту функцию.
7. HTML5 вызывает функцию набора Android или iOS
HTML5 предоставляет теги, которые автоматически вызывает набор номера, просто добавьте TEL: в href тега тега.
следующее:
<a href = "Тел: 4008106999,1034"> 400-810-6999 Обращение в 1034 </a>
Позвоните по телефону напрямую следующим образом
<a href = "Тел: 15677776767"> Нажмите, чтобы позвонить 15677776767 </a>
8. функция позиционирования HTML5GPS
Для получения подробной информации, пожалуйста, см.
9. Когда вытягивая стержень вверх и вниз, он застрял или медленно
Body {-webkit-overflow-scrolling: touch; переполнение скрещивания: touch;}Android3+ и IOS5+ поддержка CSS3 Новые атрибуты переполнены переполнены
10. Копирование или выбор текста запрещено
Element {-webkit-user-select: none; -moz-USER-SELECT: Нет; -KHTML-USER-SELECT: Нет; Пользовательский селек: нет;}Решите текст страницы, который можно выбрать для мобильных устройств (в зависимости от потребностей продукта)
11. Нажмите и удерживайте страницу в течение долгого времени и сбой
element {-webkit-touch-callout: none;}12. Тени по умолчанию в поле ввода под iPhone и iPad
Element {-webkit -appearance: нет; }13. Полуплановая серая маска появляется при прикосновении к элементам под iOS и Android
Element {-webkit-tap-highlight-color: rgba (255,255,255,0)}Установка значения альфа на 0 может удалить прозрачную серую маску. ПРИМЕЧАНИЕ. Значение свойства прозрачного является недействительным под Android.
Следующая статья имеет подробное введение, адрес: http://www.vevb.com/post/phone_web_ysk
14. Активная обработка совместимости является псевдо-классом: Активная недействительна
Метод 1: Добавьте OnTouchStart в тело
<body ontouchstart = "">
Метод 2: JS связывает события TouchStart или Touchend с документом
<style> a {color: #000;} a: active {color: #fff;} </style> <a herf = foo> bar </a> <script> document.addeventListener ('touchStart', function () {}, false); </script>15. Определение анимации 3D включает аппаратное ускорение
Element {-webkit -transform: translate3d (0, 0, 0) Transform: translate3d (0, 0, 0);}Примечание: 3D деформация будет потреблять больше памяти и питания
16. 1px граница экрана сетчатки
Элемент {пограничная ширина: тонкая;}17. Совместимая на обработку маски Webkit Mask
Некоторые низкокачественные телефоны не поддерживают маску CSS3 и могут быть понижены необязательно.
Например, вы можете использовать суждение JS для обозначения различных классов:
if ('webkitmask' в document.documentelement.style) {alert ('s поддержка маски');} else {alert ('s не поддерживается Маска');}18. Проблемы регулировки размера шрифта при вращении экрана
HTML, Body, Form, Fieldset, P, Div, H1, H2, H3, H4, H5, H6 {-webkit-Text-Size-adjust: 100%;}19. Экран переходного вспышки
/Установите, как встроенные элементы отображаются в трехмерном пространстве: сохранить 3D/-WEBKIT-Transform-стиль: PRESERVE-3D;/Установите, виден ли обратная сторона конвертированного элемента: скрыто;
20. Круглый угловой ошибка
Некоторые телефоны Android имеют округлые углы.
фоновая зажима: прокладка;
21.
<Meta name = "Apple-Mobile-Web-App-Status-Bar-стиль" Content = "Black" />
иллюстрировать:
Если вы сначала не используете Apple-Mobile-Web-APP, чтобы указать режим полноэкранного режима, этот метатец не будет работать.
Если содержимое установлено по умолчанию, строка состояния будет отображаться нормально. Если установить на Blank, в панели состояния будет черный фон. Если установлено на Blank-Translucent, строка состояния выглядит черной полупрозрачной. Если установлено по умолчанию или пустому, страница отображается ниже строки состояния, то есть строка состояния занимает верхнюю часть, а страница занимает нижнюю часть. Оба не заблокированы другой стороной или заблокированы. Если установлено на Blank-Translucent, страница заполняет экран, где верхняя часть страницы покрывается строкой состояния (она охватывает высоту страницы на 20px, в то время как экран Retina для iPhone4 и iTouch4 составляет 40px). Значение по умолчанию по умолчанию.
22. Установите кеш
<meta http-equiv = "cache-control" content = "no-cache" />
Мобильные страницы обычно кэшируются после первой нагрузки, и каждое обновление использует кэш вместо того, чтобы вторгать запрос на сервер. Если вы не хотите использовать кэш, вы можете установить без кеша.
23. Значки рабочего стола
<link rel = "Apple-touch-ICon" href = "touch-iCon-iphone.png" /> <link rel = "Apple-touch-iCon" Sizes = "76x76" hRef = "touch-iCon-iPad.png" /> <link rel = "Apple-iCon" Размеры = "120x120" href = "touch-IconIna-iCon-iCon-iCon-iCONINININA. /> <link rel = "Apple-Touch-ICon" размеры = "152x152" href = "touch-icon-ipad-retina.png" />
Определите разные значки рабочего стола для разных устройств под iOS. Если не определено, используйте текущий скриншот в качестве значка.
Считается, что приведенный выше метод написания имеет блеск по умолчанию. Следующий метод настройки может удалить эффект блеска и восстановить эффект рисунка дизайна!
<link rel = "Apple-Touch-ICon, снятый" href = "touch-iCon-iphone.png" />
Размер изображения может быть установлен на 5757 (PX) или сетчатка может быть установлен на 114114 (PX), а размер iPad составляет 72*72 (PX)
24. Начальный экран
<link rel = "Apple-touch-startup-image" href = "start.png"/>
Изображение, отображаемое при запуске страницы под iOS, - это избегать белого экрана при загрузке.
Различные размеры могут быть указаны через матрицу:
<!-iPhone-> <link href = "Apple-touch-startup-image-320x460.png" Media = "(WIDTH Device: 320px)" rel = "Apple-touch-startup-image" /> <!-iPhone Retina-> <link href = "Apple-Startup-image-640x920.png" (media media wydethtth) и (media adpence-wryth-wry-image-640x920. (-Webkit-device-pixel-ratio: 2) "rel =" Apple-touch-startup-image " /> <!-iPhone 5-> <link rel =" Apple-touch-startup-image "media =" (width Device: 320px) и (Hevice-Height: 568px) и (-Webkit-device-pixel-ratio: 2) " href = "Apple-touch-startup-image-640x1096.png"> <!-iPad Portrait-> <link href = "Apple-touch-startup-image-768x1004.png" Media = "(WIDTH Device: 768px) и (Ориентация: портрет)" Rel = "Apple-touch-startup-start-image"! href = "Apple-touch-startup-image-748x1024.png" media = "(Устройство: 768px) и (Ориентация: ландшафт)" rel = "Apple-touch-startup-image" /> <!-iPad retina Portrait-> <link href = "Apple-touch-startup --1536x2008.p" href = "apple-startup-image-1536x2008.p" href = "apple-touch-startup --1536x2008.p" 1536px) и (Ориентация: портрет) и (-webkit-device-pixel-ratio: 2) "rel =" Apple-touch-startup-image " /> <!-Landscape iPad Retina-> <Link href =" (-Webkit-device-pixel-ratio: 2) "rel =" Apple-Startup-Image " />
25. Браузер частный и другой мета
Следующие атрибуты не были применены в проекте, вы можете написать демо, чтобы проверить следующее!
QQ Browser Private
Полный экран режим
<meta name = "x5-fullScreen" content = "true">
Принудительный вертикальный экран
<meta name = "x5-ориентация" content = "портрет">
Принудительный горизонтальный экран
<meta name = "x5-ориентация" content = "ландшафт">
Режим приложения
<meta name = "x5-page-mode" content = "app">
UC Browser Private
Полный экран режим
<meta name = "Полнократный" content = "yes">
Принудительный вертикальный экран
<meta name = "screen-perientation" content = "портрет">
Принудительный горизонтальный экран
<meta name = "screen-perientation" content = "landscape">
Режим приложения
<meta name = "browsermode" content = "Приложение">
другой
Оптимизирован для портативных устройств, в основном для некоторых старых браузеров, которые не распознают Viewports, такие как Blackberry
<meta name = "Handheldlidly" content = "true">
Старый браузер Microsoft
<meta name = "mobileptimized" content = "320">
Windows Phone нажмите без выделения
<meta name = "msapplication-tap-highlight" content = "no">
26. Keyup, Keydown и поддержка Keypress в iOS не очень хороша
Проблема заключается в следующем: при использовании поиска ввода для нечеткого поиска введите ключевые слова на клавиатуре и запросите через фон AJAX, затем возвращайте данные, а затем отметьте ключевые слова для возвращенных данных Red. Это нормально использовать вход для мониторинга событий клавишных клавиш в мобильных браузерах Android, но он очень медленно становится красным в мобильных браузерах iOS. После ввода с использованием метода ввода событие KeyUP не соответствует немедленному соответствующему. Это может быть соответствует только после удаления!
Решение:
Вы можете использовать событие HTML5 для замены Keyup для замены Keyup
<input type = "text" id = "testinput"> <script type = "text/javascript"> document.getElementById ('testInput'). addEventListener ('input', function (e) {var value = e.target.value;}); </script>Тогда вы получите эффект, похожий на Keyup!
27. Проблема установки ввода веб -сайта H5 на тип = номер
Установка типа ввода веб -страницы H5 к номеру, как правило, вызывает три задачи. Одна проблема заключается в том, что атрибут MaxLength не прост в использовании. Другой заключается в том, что когда форма отправляется, она округлена по умолчанию. В -третьих, некоторые телефоны Android имеют проблемы с стилем.
После решения проблемы я в настоящее время использую JS. следующее
<input type = "number" oninput = "checktextlength (this, 10)"> function checktextlength (obj, длина) {if (obj.value.length> length) {obj.value = obj.value.substr (0, length); }}Вопрос 2 заключается в том, что по умолчанию подчинения формы для формирования проверки, шаг по умолчанию составляет 1, а атрибут шага должен быть установлен. Если 2 десятичного места сохраняются, метод написания следующего:
<input type = "номер" step = "0,01" />
Что касается шага, я дам краткое представление здесь. В Type Type = номер, стрелка вверх и вниз, как правило, будет автоматически генерироваться. Нажатие на стрелку вверх добавят шаг по умолчанию. Нажатие на стрелку вниз уменьшит шаг по умолчанию. Шаг по умолчанию в числе составляет 1. То есть шаг = 0,01, вы можете разрешить вход 2 десятичных мест и щелкнуть стрелки вверх и вниз, чтобы увеличить 0,01 и уменьшить 0,01 соответственно.
Если шаг и мин используются вместе, значение должно быть между минем и максимум.
См. Следующий пример:
<input type = "number" step = "3.1" min = "1" />
Какие числа могут быть введены в поле ввода?
Во -первых, если минимальное значение составляет 1, вы можете ввести 1.0, второе - это ввести (1+3.1), то есть 4,1, и т. Д., Каждый щелчок на стрелке вверх и вниз будет увеличиваться или уменьшаться на 3.1, а входные числа будут недействительными. Это краткое введение в шаг.
Вопрос 3: Удалите стиль ввода по умолчанию
input [type = number] {-moz-appearance: textfield;} input [type = number] ::-webkit-inner-spin-button, input [type = number] ::-webkit-outer-spin-button {-webkit-apporance: none; поля: 0;}28. Настройка iOS настройки кнопки ввода будет перезаписан стилем по умолчанию
Решение заключается в следующем:
Ввод, Textarea {Border: 0; -Webkit-apperance: нет; }Установите стиль по умолчанию на нет
29. Ввод буквы iOS клавиатуры, начальная буква по умолчанию.
Решение: установите следующие свойства
<input type = "text" autocapitalize = "off" />
30. Выберите раскрытие выберите Установите правое выравнивание
Настройки следующие:
Выберите опцию {направление: rtl;}31. деформация перекоса выполняется через преобразование, вращение вращения вызовет замену
Это может быть установлено следующим образом:
-Webkit-transform: rotate (-4deg) skew (10deg) translatez (0); Преобразование: вращение (-4DEG) перекосив (10DEG) Translatez (0); Схема: 1PX SOLID RGBA (255,255,255,0)
32. Мобильный клик на 300 мс задержка
300 мс все еще приемлемо, но мы должны решить проблему, вызванную 300 мс. 300 мс приводит к тому, что пользовательский опыт не очень хорош. Чтобы решить эту проблему, мы обычно используем события TAP, чтобы заменить события клика на мобильной стороне.
Рекомендуется два JS, один из них FastClick, а другой - tap.js
За задержку на 300 мс, см.: Http://thx.github.io/mobile/300ms-click-delay/
33. Проблема проникновения в мобильную конечную точку
Примеры следующие:
<div id = "Haorooms"> nod Event Test </div> <a href = "www.vevb.com"> www.vevb.com </a>
Div является абсолютной маской позиционирования, а z-индекс выше, чем a. Тег - это ссылка на странице, мы связываем событие TAP с Div:
$ ('#harooms'). On ('tap', function () {$ ('#harooms'). hide ();});Когда мы нажимаем на слой маски, DIV нормально исчезает, но когда мы нажимаем на слой маски на теге, мы обнаруживаем, что запускается ссылка A, которое называется точечным событием.
причина:
TouchStart предшествует Touchend предшествует щелчке. То есть, запуск щелчка задерживается, и на этот раз около 300 мс. То есть маска скрыта после наших триггеров. В настоящее время щелчок не был запущен. Через 300 мс наш клик запускается по ссылке ниже, потому что маска скрыта.
решать:
(1) Попробуйте использовать событие Touch, чтобы заменить событие Click. Например, используйте событие Touckend (рекомендуется).
(2) Используйте FastClick, https://github.com/ftlabs/fastclick
(3) Используйте предотвращение, чтобы заблокировать щелчок тега
(4) Задержка определенного времени (300 мс+) для обработки событий (не рекомендуется)
(5) Приведенное выше может быть решено, но если это действительно не работает, оно будет заменено инцидентом с кликом.
Ниже приведено событие Touchend, следующим образом:
$ ("#harooms"). On ("touchend", function (event) {event.preventDefault ();});34. Устранение числа вилки в IE10
Ввод: -ms-clear {display: none;}35. Относительно оптимизации шрифтов на iOS и OS X (на горизонтальных и вертикальных экранах будет противоречивая шрифт
Размер шрифта будет сброшен, когда браузер iOS отельцает. Установка текста-оборота никто не может решить проблему на iOS, но функция масштабирования шрифта Safari на настольной версии будет недействительной, поэтому лучшее решение-повернуть в соответствие с размером текста до 100%.
-Вебкит-текст-размер-100%;-MS-Text-Size-recust: 100%; ud-recust: 100%;
36. Об системе iOS, при входе в английский с помощью китайского метода ввода, между буквами может появиться одну шестую пространство.
Можно удалить регулярным
this.value = this.value.replace (// u2006/g, '');
37. Проблема с ошибкой аудио -аудио мобильного HTML5 Audio
Это не ошибка. Поскольку автоматически воспроизведение аудио или видео на веб -страницах вызовет некоторые проблемы или ненужное потребление трафика для пользователей, системы Apple и Android обычно запрещают автоматическое воспроизведение и запускаемое воспроизведение с использованием JS. Это должно быть вызвано пользователем, прежде чем его можно будет сыграть.
Решение: сначала коснитесь TouchStart пользователя, воспроизведения и паузы (звук начинает загружать, а затем используйте JS, чтобы использовать его снова).
Код решения:
document.addeventListener ('touchStart', function () {document.getElementsbytagname ('audio') [0] .play (); document.getElementsbytagname ('audio') [0] .pause ();});38. Проблема заполнителя не поддерживается на мобильную дату ввода HTML5
Я не думаю, что есть хорошее решение для этого, используйте следующий метод
Кода -копия выглядит следующим образом:
<input waceholder = "date" type = "text" onfocus = "(this.type = 'date')" id = "date">
Некоторым браузерам может потребоваться дважды щелкнуть!39. Некоторые модели имеют ввод с поиском типа, и предоставляется их собственный метод модификации кнопки кнопки.
Некоторые модели управления вводом поиска будут поставляться с кнопкой закрытия (псевдоэлемент), и, как правило, чтобы быть совместимыми со всеми браузерами, мы будем реализовать его сами. В настоящее время метод удаления нативной кнопки «Закрыть»
#Search ::-WebKit-Search-Cancel-Button {Display: None; }Если вы хотите использовать нативную кнопку закрытия и хотите, чтобы она соответствовала стилю дизайна, вы можете изменить стиль этого псевдоэлемента.
40. Поощряйте возможность расширить
метод Zepto:
$ (sltelement) .trrgger ("mousedown");Нативный метод JS:
функция Showdropdown (sltelement) {var Event; event = document.createevent ('mouseevents'); event.initmouseevent ('mousedown', true, true, window); sltelement.dispatchevent (event);};