Сводка по проблемам мобильной веб-разработки и оптимизации

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

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

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

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 听说在ios7以上版本就没效果了 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent 但是我都是用black-->

3. Звоните и пишите

<a href="tel:020-11811922">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>

4. анимация перехода css3 для включения аппаратного ускорения

ps: В интернете говорят, что при таком использовании энергопотребление мобильника тоже увеличится. Я тоже грубо попробовал на своем мобильнике, и действительно есть такая вещь.Я обычно читаю блог, и он на 1% меньше примерно за 5 минут.Когда я использую аппаратное ускорение около 3 минут, это 1 % меньше.Все обращают внимание на рациональное использование.

.translate3d{
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
 }

Сказав это, кстати, два предложения по анимации или переходу:

1. На мобильном телефоне (собственно то же самое и на ПК). CSS3 анимация или переход попытайтесь использовать преобразование и непрозрачность для достижения анимации, не используйте левый и верхний.

2. Анимации и переходы можно решить с помощью css3, поэтому не используйте js. Если это сложная анимация, ее можно разработать с помощью css3+js (или html5+css3+js), эффект только неожиданный, но не невозможный.

5. Экран мобильного клика выдает ответ с задержкой 200-300 мс

Событие щелчка имеет задержку 300 мс, потому что ему нужно подождать, чтобы подтвердить, является ли это событием двойного щелчка (интервал между двумя событиями щелчка меньше 300 мс, это считается двойным щелчком), и опыт не очень хороший. . Текущее решение, первое, заключается в использовании touchstart или touchend вместо щелчка. Или инкапсулируйте событие касания, чтобы заменить событие щелчка.Так называемое событие касания состоит из события touchstart + touchmove (чтобы определить, является ли оно скользящим событием) + пакет события touchend.
Что касается описания задержки событий касания и мыши, я процитировал картинку в блоге Е Сяочая следующим образом.



На мобильных устройствах задержка клика составляет почти 400 мс. Для пользователей это очень серьезная задержка! Поэтому не рекомендуется использовать клик на мобильных телефонах.
Прилагается оригинальный текст великого бога Е Сяочая.Скорость отклика на нажатие на портативном устройстве, события мыши и события касания

6. Оптимизация изображения

6-1. Изображение в кодировке Base64 заменяет изображение URL

Это нечего объяснять, это то, что мы не можем отправить запрос, не отправим, для некоторых мелких иконок (мой подход заключается в том, чтобы 8K следующие иконки были преобразованы в base64) и тому подобное, могут быть картинки с base64, для уменьшения запросов отправить . Особенно в мобильном терминале запрос особенно ценен, в случае, когда скорость не очень хорошая, запрос находится в драгоценном драгоценном.

6-2. Сжатие изображения

Для всего веб-сайта изображения являются одним из ресурсов, которые занимают больше всего трафика.Это не применимо, если вы не можете их использовать.Иконки должны быть в кодировке base64, значки шрифтов, SVG и т. д. Вместо этого вы должны выбрать наиболее подходящего формата и размера. , а затем сжать -- здесь рекомендуется запустить TencentУмная карта.
PS: Чрезмерное сжатие размера изображения влияет на эффект отображения изображения, что может сделать изображение размытым.Вообще говоря, качество составляет около 60 или около того!

6-3. Отложенная загрузка изображения

Скорость загрузки первого экрана напрямую влияет на работу пользователя. Рекомендуется загружать ресурсы изображения ниже первого экрана, когда это необходимо пользователю. Это может значительно оптимизировать загрузку первого экрана и сократить время, необходимое для загрузки первого экрана!
ps: Ленивая загрузка требует частых манипуляций с DOM с помощью js, что приведет к большому количеству перерисовок и рендеринга, влияющих на производительность.

6-4.img или фон

Существует два способа отображения изображений: один отображается как тег изображения, а другой отображается как фоновое изображение! Разница между ними написана ниже.
изображение:htmlтеги вimgОн является частью структуры веб-страницы и будет загружаться вместе с другими тегами в процессе загрузки структуры.
задний план:кcssФоновое изображение, существующее в фоновом изображении, не начнет загружаться до тех пор, пока не будет загружена структура (после отображения всего содержимого веб-страницы)
То есть страница сначала загружает тегimgконтент, затем загрузите фоновое изображениеbackgroundЦитируемое изображение. Введите изображение, затем, прежде чем изображение будет загружено,imgСодержимое после этого отображаться не будет. и использоватьbackgroundЧтобы представить ту же картину, после завершения структуры страницы и загрузки контента она начала загружать фоновые изображения, обычный просмотр веб-контента, но не видит фоновое изображение. Что касается этих двух, выберите правильный выбор в соответствии с обычаями и другими факторами высокого спроса!

7. Быстрая прокрутка отскока

На ios при частичной прокрутке этот атрибут нужно добавить! Если вы не добавите его, прокрутка будет очень медленной, и будет казаться, что она выглядит как карточка за карточкой.

-webkit-overflow-scrolling: touch;

Однако с этим добавлением будет ошибка на ios.

Макет следующим образом

.fb-boxбольшойdiv, который содержит все элементы на странице, включая всплывающее окно, которое вы видите.dialog-img, и установитеheight:100%;-webkit-overflow-scrolling:touch;position:relative;

потребности в позиционировании,-webkit-overflow-scrolling:touch;Также необходимо, но установлено так, вiosбудет одинbug, После того, как страница прокрутится на определенное расстояние, щелкните, чтобы отобразить всплывающее окно, а затем закройте его, вы обнаружите, что часть всплывающего окна все еще находится «на странице».



Решение 1:
выскакиватьdivа также.fb-boxМакет в виде одноуровневых узлов, и получить еще один во внешнем слоеdivЗаверните, даже если эта яма полезет, эффект следующий





Решение 2:
.fb-boxУдалитьposition:ralative;. сделать всплывающее окноdivСсылаться наbodyпозиция!

8. Используйте фикс с осторожностью

под iOSfixedЭлементы склонны к ошибкам в позиционировании, всплывающая программная клавиатура повлияет наfixedПозиционирование элемента, смещение элемента (прокрутка и восстановление), а иногда и эффект заставки. Я также искал эту проблему и обнаружил, что другие сталкивались с проблемами, с которыми я не сталкивался! Правда, эй~. Поэтому на мобильных телефонах не рекомендуется использоватьfixedнайти, использоватьabsoluteзаменять! Если вы должны использовать его, после его написания обязательно протестируйте его несколько раз!

9. Удалите заставку перехода

PS: Я недавно разработал эту проблему, и кажется, что это не имеет значения, если я не добавлю этот код, но я добавил его, когда я просил об этом в прошлом. нет обратной связи, что есть какие-либо проблемы!

.no-flash { 
        -webkit-transform-style: preserve-3d; 
        -webkit-backface-visibility: hidden; 
        -webkit-perspective: 1000; 
} 

10. Удалите полупрозрачную серую маску, сгенерированную при касании элемента в системе ios.

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

11. Удалите стандартный стиль ввода по умолчанию в ios

input,button,textarea{-webkit-appearance: none;}

12. Проведите пальцем влево и вправо, чтобы избежать скольжения страницы

С этой деталью я столкнулся, когда разрабатывал карту фокуса на основе vue. Позже я не мог найти способ, поэтому задал вопрос прямо на sf.Мобильная карусель, при скольжении вверх и вниз не вызывает прокрутку страницы
ps: я не использую какую-либо библиотеку для скольжения, я оцениваю, скользит ли она влево или вправо или скользит вверх и вниз в соответствии с расстоянием перемещения touchstart и touchend!

13. Общие проблемы vue-router и WeChat

Ссылка для обмена и отправки выглядит следующим образом
http://www.example.com/dist/html#/index?utm_source=share
http://www.example.com/dist/html#/index.html/index?utm_source=share
Но фактическое соединение после совместного использования выглядит следующим образом: общая ссылка, по которой щелкнули другие, не сможет открыть веб-страницу.
http://www.example.com/dist/html?from=xxxx#/index&utm_source=share
http://www.example.com/dist/html#/index.html?from=xxxx/index&utm_source=share

решение
1. Настройте общий URL-адрес
2. Избегайте однофайловых приложений

14. Челка iphoneX

Новый мобильный телефон Apple, вскоре после того, как он вышел, Дуань Цзышоу не мог усидеть на месте, всякие насмешки, но сегодня мы поговорим об этом! Давайте поговорим о проблемах, связанных с интерфейсом iPhoneX, и о проблемах, связанных с пользовательским интерфейсом! Ниже представлено решение Da Mo, Zhang Xinxu и других для iphoneX Qi Liu Hai! Избегайте прыгать в яму в это время!
Выемка iPhone X и CSS
Прокрутка элементов автоматически обводит челку iPhone X с помощью фигур CSS.
Анализ проблем адаптации веб-страницы iOS 11

Краткое содержание адаптации домработницы мобильного телефона iPhoneX

15. Другие ссылки

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

1.Каковы сценарии оптимизации?
2.Схема оптимизации производительности мобильной веб-страницы
3.Лучшие практики и инструменты для оптимизации веб-интерфейса
4.Серия мобильных интерфейсов — оптимизация производительности мобильных страниц
5.Оптимизация веб-производительности: оптимизация изображений

16. Резюме

Проблемы, с которыми я столкнулся на мобильном веб-сайте (мобильный веб-сайт), на данный момент указаны выше! Обязательно будет еще много проблем, с которыми я не сталкивался, которые будут записаны позже, но они не обязательно будут опубликованы в виде статей. Если вы столкнулись с какими-либо проблемами, большими или маленькими, при разработке мобильного сайта, пожалуйста, оставьте комментарий или напомните о себе в виде статьи! Это удобно, чтобы в будущем не наступать на яму! Наконец, если у вас есть что добавить или вы думаете, что я плохо пишу, вы ошибаетесь! Добро пожаловать, чтобы дать указатели!