Уверяем: разработка мобильных интерфейсов постепенно входит в основное русло фронтенд-технологий. На самом деле, вам не нужно осваивать дополнительные технологии, чтобы следовать обычному ПК. Однако тот, который вы используете в Интернете для ПК, не подходит для мобильные телефоны в большинстве случаев в Интернете, вы должны знать точку внимания. Конечно, мобильный веб ощущается как битва между h5 и css3, там достаточно высокоуровневых технологий, которые ждут, пока вы их освоите, в связи с этим можно радостно сказать: пусть идет к черту.
1. Во-первых, давайте взглянем на некоторые приватные метатеги в ядре webkit.Эти метатеги играют очень важную роль в разработке веб-приложений.
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">Первый метатег означает: обязательно сохранять ширину документа и ширину устройства равными 1:1, а максимальное соотношение ширины документа равно 1,0, и пользователям не разрешается нажимать на экран для увеличения. в и просматривать;
Второй метатег — это частный метатег Safari в устройстве iphone, что означает: разрешить просмотр в полноэкранном режиме;
Третий метатег также является частным тегом iphone, который определяет стиль строки состояния в верхней части Safari в iphone;
Четвертый метатег говорит: Скажите устройству игнорировать распознавание номеров на странице как телефонных номеров.
2. Использование тегов HTML5
Приступая к написанию веб-приложений, я предложил фронтенд-инженерам использовать HTML5 вместо HTML4, потому что HTML5 может реализовать некоторые богатые возможности веб-приложений, которые не могут быть достигнуты в HTML4, что может сократить объем работы разработчиков.Конечно, решать вам. для использования HTML5 Прежде, убедитесь, что хорошо знакомы с этим, чтобы знать роль новых тегов HTML5. Например, чтобы определить часть контента или область статьи, вы можете использовать тег раздела, а чтобы определить панель навигации или вкладку, вы можете использовать тег навигации напрямую и так далее.
3. Откажитесь от свойства CSS float
В процессе разработки проекта вы можете столкнуться с макетом размещения и отображения контента, если вы столкнулись с таким визуальным наброском, предлагаю вам отказаться от float и использовать display:inline-block напрямую;
4. Используйте свойство фона границы CSS3
Эта кнопка имеет закругленные углы, эффект внутреннего свечения и эффект подсветки.Такую кнопку нельзя написать с помощью CSS3.Конечно, скругленные углы можно написать с помощью CSS3, но подсветка и внутреннее свечение не могут быть написаны с помощью CSS3.
В настоящее время вы можете использовать -webkit-border-image для определения стиля этой кнопки.
-webkit-border-image — очень сложное свойство стиля.
5. Заблокируйте тег
Пожалуйста, не забудьте поместить каждый фрагмент данных в тег, зачем это делать? Потому что на сенсорном телефоне, чтобы улучшить взаимодействие с пользователем, необходимо сделать так, чтобы кликабельная область пользователя была как можно больше.
6. Режим адаптивной верстки
При написании CSS я не рекомендую фронтенд-инженерам фиксировать ширину контейнера (будь то внешний контейнер или внутренний). Чтобы адаптироваться к различным портативным устройствам, я предлагаю фронтенд-инженерам использовать режим адаптивной верстки (Alipay принимает режим адаптивной верстки), потому что это может сделать вашу страницу в ipad, itouch, ipod, iphone, android, web safari. , Chrome может отображаться нормально, вам не нужно снова учитывать разрешение устройства.
7. Научитесь использовать webkit-box
В предыдущем разделе мы говорили о режиме адаптивной верстки, и у некоторых учащихся может возникнуть вопрос: как добиться полной адаптации на мобильных устройствах? Я очень благодарен, что webkit предоставляет значение webkit-box для свойства отображения, которое может помочь фронтенд-инженерам добиться гибкого управления блочной моделью.
8. Как убрать идентификацию адресов электронной почты в платформе Android
Учащиеся, которые видели API веб-приложения iOS, знают, что iOS предоставляет метатег: используется для отключения автоматического распознавания телефонных номеров iOS на странице. В iOS адрес электронной почты не распознается автоматически, но на платформе Android он автоматически определяет адрес электронной почты. Когда пользователь коснется адреса электронной почты, Android откроет всплывающее окно, предлагающее пользователю отправить электронное письмо. не хотите, чтобы Android автоматически определял адрес электронной почты страницы, вы можете добавить такой метатег в заголовок
<meta content="email=no" name="format-detection" />9. Как убрать панель управления для ввода URL в iOS и Android
9. Как убрать панель управления для ввода URL в iOS и Android
Ваш начальник, PD или дизайнер взаимодействия может спросить вас: можем ли мы сделать наше веб-приложение более похожим на нативное приложение, я не хочу, чтобы пользователь видел панель управления для ввода URL-адреса?
Ответ можно сделать. Мы можем использовать простой код JavaScript для реализации этого эффекта.
setTimeout(scrollTo,0,0,0);Обратите внимание, что этот код должен быть помещен в window.onload для правильной работы, а высота содержимого вашего текущего документа должна быть выше, чем высота окна для эффективного выполнения этого кода.
10. Как запретить пользователю вращать устройство
Я также хотел запретить пользователю поворачивать устройство, а также хотел добиться чего-то вроде некоторых клиентов: корректно работать только в портретном режиме или ландшафтном режиме. Но теперь я могу вам ответственно сказать: не думайте об этом, в мобильной версии webkit это невозможно!
По крайней мере, API веб-приложения Apple сказал: чтобы пользователи могли нормально просматривать веб-страницы в сафари, мы должны убедиться, что, когда устройство пользователя находится в любом положении, сафари может отображать веб-контент нормально (то есть адаптивно), поэтому мы запрещаем Разработчик блокирует событие ориентация браузера.Кажется, исходная точка Apple верна.Apple действительно не обычная Apple.
iOS запретила разработчикам блокировать события изменения ориентации, а как насчет Android? К сожалению, я не нашел информации о том, что Android запрещает разработчикам блокировать события изменения ориентации браузера, но на платформе Android это действительно невозможно предотвратить.
11. Как определить, запускает ли пользователь ваше веб-приложение с главного экрана
Учащиеся, которые видели API веб-приложений Apple, знают, что iOS предоставляет функцию Safari для добавления текущей страницы на главный экран. слева от iPad, вы можете добавить текущую страницу на главный экран. Когда страница добавляется на главный экран устройства, значок запуска текущей страницы будет автоматически добавлен на главный экран устройства. Значок запуска быстро и удобно запустит ваше веб-приложение. Самая большая разница между веб-приложением, запущенным с главного экрана, и браузером, получающим доступ к вашему веб-приложению, заключается в том, что он очищает панель инструментов над и под браузером, так что ваше веб-приложение больше похоже на нативное приложение, а еще одно отличие — это навигатор в объекте окна A. автономное свойство дочернего объекта. В iOS, когда браузер напрямую обращается к сайту, navigator.standalone имеет значение false. При запуске веб-приложения с главного экрана navigator.standalone имеет значение true. Мы можем узнать, заходит ли пользователь в данный момент в наше веб-приложение с главного экрана через навигатор. .автономное имущество.
Никогда не было такой вещи, как добавление на главный экран в Android!
12. Как отключить автоматическую настройку заглавных букв клавиатуры в iOS
Мы знаем, что в iOS, когда всплывает виртуальная клавиатура, по умолчанию включена функция прописной буквы первой буквы.В соответствии с некоторыми бизнес-сценариями нам может потребоваться отключить эту функцию.В мобильной версии webkit есть атрибут autocapitalize для элемента ввода Укажите autocapitalize="off", чтобы отключить использование заглавных букв по умолчанию.
13. Как полностью запретить пользователям открывать страницы в новых окнах в iOS
Иногда нам может понадобиться запретить пользователям открывать страницу в новом окне, мы можем использовать target="_self" тега a, чтобы указать, что пользователь открывает в новом окне, или атрибут target остается пустым, но вы найти, что пользователи iOS находятся долго над этой ссылкой После нажатия в течение 3 секунд iOS выскочит кнопка списка, и пользователь все еще может открыть страницу в новом окне с помощью этих кнопок.В этом случае целевой атрибут, указанный разработчиком будет недопустимым, но можно указать -webkit-touch- текущего элемента.Атрибут стиля выноски имеет значение none, чтобы iOS не выталкивала эти кнопки. Этот трюк работает только на iOS, но не на платформе Android.
14. Как запретить пользователям сохранять картинки\копировать картинки в iOS
Мы упомянули атрибут -webkit-touch-callout элемента в совете 13, также указание -webkit-touch-callout на none для тега img также предотвратит появление на устройстве кнопки списка, поэтому пользователь не сможет сохранить\скопировать твоя картинка тоже.
15. Как запретить пользователям выделять текст в iOS
Мы можем запретить пользователям iOS выбирать текст, указав для атрибута -webkit-user-select текстовой метки значение none.
16. Как получить значение полосы прокрутки в iOS
В настольных браузерах вы хотите получить значение полосы прокрутки через document.scrollTop и document.scrollLeft, но в iOS вы обнаружите, что эти два свойства не определены, почему? Поскольку в iOS нет понятия полосы прокрутки, значение полосы прокрутки можно получить обычным образом с помощью этих двух свойств в Android, так как же нам получить значение полосы прокрутки в iOS?
С помощью window.scrollY и window.scrollX мы можем получить значения полосы прокрутки текущего окна по оси Y и по оси X.
17. Как решить проблему переполнения границы блока
Когда вы указываете блочный элемент и определяете для него границу, установите его ширину на 100%. При разработке мобильных устройств мы обычно определяем текстовое поле шириной 100 % и определяем его как блочный элемент для достижения полноэкранного адаптивного стиля, но в этот раз вы обнаружите, что граница (левая и справа) элемента равен 1, каждый пиксель будет переполнять документ, в результате чего появится горизонтальная полоса прокрутки.Чтобы решить эту проблему, мы можем добавить специальный стиль — webkit-box-sizing: border-box; для указания размера поля включая ширину границы.
18. Как решить проблему закругленных углов на платформах ниже Android 2.0
Если вы достаточно внимательны, то при разработке wap-сайтов вы обнаружите множество проблем на платформах ниже Android 2.0, например, проблему закругленных границ.
При определении закругленных углов для элемента, чтобы быть полностью совместимым с платформами ниже Android 2.0, мы должны определить закругленные углы границы в соответствии со следующими методами:
Должен быть добавлен префикс 1\-webkit (в iOS его можно не добавлять, а в андроиде необходимо);
2\Если стиль определен для границы, например, border:1px solid #000, то свойство -webkit-border-radius должно стоять после свойства границы.
3\Если у нас есть такой визуальный элемент, когда верхний левый угол и верхний правый угол закруглены, мы должны сначала определить глобальный (значение округления 4 углов)-webkit-border-radius: 5px; а затем покрыть его в свою очередь In нижний левый и правый углы, -webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0; в противном случае все прямые углы будут отображаться на платформах ниже Android 2.0, и помните! Необходимо добавить префикс -webkit!
19. Как решить проблему, что страница в платформе андроид не может быть адаптивной
Хотя ваши html и css полностью адаптируются, однажды, если вы обнаружите, что ваша страница не отвечает при отображении в Android, сначала подтвердите, содержит ли ваш тег заголовка следующие метатеги:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />Если да, внимательно проверьте, есть ли для этого атрибута значение width=device-width. Если нет, добавьте его немедленно!
20. Как решить автоматическое распознавание сафари и автоматическое добавление стилей к 5-значным числам на странице в iOS 4.3
Новая система iOS — версия 4.3.После обновления в сафари возникла ошибка: даже если вы добавите следующие метатеги, сафари по-прежнему будет автоматически распознавать 5-значные последовательные числа на странице и повторно отображать стиль. Это означает, что ваш css недействителен для этого тега.
<meta name="format-detection" content="telphone=no" />Мы можем решить это неприятным способом. Например, метка с указанием суммы на wap-сайте Alipay была переписана следующим образом:
<button class="t-balance"style="background:none;padding:0;border:0;">95009.00</button>元