Mobile Development
1.0.0
Относится к диагональной длине экрана, в дюймах. Общие размеры включают: 3,5 дюйма, 4,0 дюйма, 5,0 дюйма, 5,5 дюйма, 6,0 дюйма и т. Д.
Примечание: 1 дюйм (дюйм) = 2,54 см (см)
Это относится к общему количеству физических точек пикселей на экране в горизонтальных и вертикальных направлениях, которые обычно представлены N * M. Например: разрешение экрана iPhone6: 750 * 1334
| модель | Разрешение (сумма физических пикселей) |
|---|---|
| iPhone 3G/3GS | 320 * 480 |
| iPhone 4 / 4s | 640 * 960 |
| iPhone 5/5s | 640 * 1136 |
| iPhone 6/7/8 | 750 * 1334 |
| iPhone 6p / 7p / 8p | 1242 * 2208 |
| iPhone x | 1125 * 2436 |
| Hawei P30 | 1080 * 2340 |
| Hawei Mate40 | 2772 * 1344 |
| Xiaomi 10 | 2340 * 1080 |
| Xiaomi 11 | 3200 * 1440 |
Также известный как: плотность пикселей экрана, это относится к количеству физических точек пикселя, содержащихся в каждом дюйме на экране. Устройство PPI (пиксели на дюйм). На самом деле, есть еще один единицу DPI (точки на дюйм). Методы расчета двух значений одинаковы, но сценарии использования разные. PPI в основном используется для измерения экранов, а DPI в основном используется для измерения принтеров, проекторов и т. Д.
Физические пиксели, также известные как пиксели устройства , представляют собой единицу длины (PX). Физический пиксель - это физическая точка визуализации на экране, которая представляет собой крошечный люминесцентный физический компонент (который можно просто понять как супер крошечную лампочку), которая является минимальной детализацией, которую может отображать экран. Физическое количество пиксельных точек (разрешение) экрана является важным параметром экрана мобильного телефона и определяется производителем экрана и не может быть изменен после производства . Например, физические пиксели, которые iPhone6 имеет в горизонтальном направлении, составляют 750, а физические пиксели, которые имеют в вертикальном направлении, - 1334, что представлено 750*1334.
CSS Pixel также известен как: Logical Pixel. Pixel CSS является абстрактной единицей длины, а устройство также является PX. Он создан для веб -разработчиков, чтобы точно измерить размер контента на веб -странице. Мы используем пиксели CSS в письменной форме CSS JS Less.
Зависимые от устройства пиксели называются DIP или DP (независимый от устройства пиксель), также известные как: независимые от плотности экрана пиксели.
Введение: в эпоху, когда [HD-экран] не появился, 1 CSS Pixel соответствует 1 физическому пикселю, но, поскольку появление [HD-экрана] эти два больше не являются отношениями 1 к 1. В 2010 году Apple запустила новый стандарт дисплея: сжатие более физических точек пикселей в экран , в то время как размер экрана остается неизменным , так что разрешение будет выше, а эффект дисплея будет лучше и более деликатным. Apple вызывает этот экран: экран Retina (также известный как экран Retina) , и в то же время запустил цифровой продукт из создания эпох, оснащенный этим экраном - iPhone 4.
Программист написал: ширина = 2px, высота = 2px box. Если пиксель CSS напрямую соответствует 1 физическому пикселю, поскольку размер экрана iPhone3G/S и iPhone4 такие же, как у iPhone4, экран iPhone4 может вместить больше физических пикселей, поэтому физические пиксели iPhone4 намного меньше, чем у iPhone3G/S. Теоретически, эта коробка будет намного меньше на экране iPhone4, чем на экране iPhone3G/S. Дело в том, что iPhone3g/s такого же размера, как iPhone4! ! ! , но iPhone 4 более деликатный и чистый. Как это сделать? Это зависит от независимых пикселей устройства. 
Появление независимых пикселей устройства делает элементы имеют нормальные размеры даже на [HD -экране]. S делает код не затронутым устройством. Он установлен производителем устройства в соответствии с характеристиками экрана и не может быть изменен.
Соотношение пикселя (DPR, соотношение пикселей устройства): отношение [физического пикселя] и [независимого устройства Pixel] в одном направлении. То есть: dpr = физические пиксели/независимые устройства пиксели
| модель | Разрешение (сумма физических пикселей) | Независимые пиксели для устройства (DIP или DP) | Соотношение пикселей (DPR) |
|---|---|---|---|
| iPhone 3G/3GS | 320 * 480 | 320 * 480 | 1 |
| iPhone 4 / 4s | 640 * 960 | 320 * 480 | 2 |
| iPhone 5/5s | 640 * 1136 | 320 * 568 | 2 |
| iPhone 6/7/8 | 750 * 1334 | 375 * 667 | 2 |
| iPhone 6p / 7p / 8p | 1242 * 2208 | 414 * 736 | 3 |
| iPhone x | 1125 * 2436 | 375 * 812 | 3 |
https://uiiiiii.com/screen/index.htm
Растровые и векторные диаграммы
Бит -пиксель изображения также является единицей длины. Немного пикселя изображения можно понимать как «маленькая сетка» в растровом карте, которая является наименьшей единицей растрового изображения.
В настоящее время, только логотип должен отображаться в высоком определении, или логотип формата SVG может быть предоставлен для решения проблемы. В противном случае используется медиа -запрос:
@media screen and ( -webkit-min-device-pixel-ratio : 2 ) {
. logo {
content : url (.. / imgs / logo@ 2 x.jpg)
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ) {
. logo {
content : url (.. / imgs / logo@ 3 x.jpg)
}
}На стороне ПК ширина по умолчанию видового порта такая же, как ширина окна браузера. В стандартном документе CSS также называется точка зрения: первоначально содержание блоков, что является основной причиной всех расчетов ширины процента CSS. На стороне ПК ширина может быть получена следующими способами:
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; На мобильных устройствах производители браузеров сталкиваются с относительно большой проблемой: как они представляют десятки тысяч, даже сотни миллионов веб -страниц ПК на мобильных устройствах в полном объеме без горизонтальных полос? Затем нам нужно представить три концепции мобильных терминалов: 1. Layout ViewPort, 2. Visual ViewPort, 3. Идеальный просмотр порта
Используется для решения проблемы раннего отображения на мобильных телефонах. В первые дни мы сделали это: ширина веб -страниц ПК обычно: 960px Диапазон 1024px, даже если он превышает этот диапазон, 960px Область 1024px по -прежнему является местоположением основного тела.
Производители браузеров разработали контейнер для мобильных устройств. Во -первых, используйте этот контейнер для удержания веб -страницы на ПК. Ширина этого контейнера, как правило, 980px . Различные устройства могут отличаться, но разница не большая. Затем контейнер сжимается одинаково пропорционально той же ширине, что и мобильный телефон, так что нет полоса прокрутки, и страница может быть полностью представлена. Тем не менее, все еще есть проблемы с этим: содержание веб -страницы сжимается слишком маленьким, что серьезно влияет на пользовательский опыт.
Как получить представление с макетами на мобильном терминале: document.documentElement.clientWidth (обычно 980px, iPad Pro - 1024px)
ПРИМЕЧАНИЕ. После сжатия просмотра макета горизонтальная ширина больше не 375px, а 980px, потому что просмотр макета сжимается, а не перехвачен.
Визуальный вид просмотра - это область, видимая для пользователя. Его абсолютная ширина всегда такая же ширина, как и экран устройства, но значение пикселей CSS, содержащихся в этой ширине, варьируется. Например: как правило, мобильные телефоны помещают 980 пикселей CSS в визуальный порт просмотра (размер визуального порта = размер просмотра макета) , в то время как iPad Pro помещает 1024 пикселей CSS в визуальный вид просмотра.
Способ получить визуальный вид просмотра на мобильном терминале: window.innerWidth , но его нельзя правильно получить в Android 2, Opera Mini и UC8. (Как правило, визуальный порт просмотра не просматривается через код)
Если вы возьмете iPhone 6 в качестве примера, опишите экран:
Порт просмотра макета, который равен ширине экрана (DP/DIP), называется идеальным видоугольником, поэтому можно также сказать, что идеальный порт просмотра является стандартом: ширина просмотра макета и экран (DP/DIP) достигаются с помощью метатеток.
Конкретные методы для настройки идеального просмотра:
< meta name =" viewport " content =" width=device-width " >【Суммируйте】:
1. 2. Преимущества: Влияние элементов рендеринга на разные устройства почти одинаково, поскольку они масштабируются контейнерами макета, такими как 200 широких ящиков: 200/980 3. Недостатки: элементы слишком малы, текст страницы неясен, а пользовательский опыт не очень хорош.
1. 2. Преимущества: страница четко отображается, контент больше не так мало, как трудно наблюдать, а пользовательский опыт лучше. 3. Недостатки: один и тот же элемент имеет различные эффекты рендеринга на различных экранах (устройства). Например, коробка шириной 375: 375/375 и 375/414 (не равный-эквивалентный дисплей). 4. Как это решить: сделать адаптацию.
При масштабировании:
Уменьшить размер:
Процесс алгоритма: при увеличении браузер перехватывает определенную долю области внутрь, а затем немедленно заполняет оставшуюся картину равными пропорциями во всем просмотре, и элементы, которые не могут быть подавлены, будут автоматически обернуты.
Сценарий мониторинга:
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} При масштабировании:
ПРИМЕЧАНИЕ. Мобильное масштабирование не повлияет на макет страницы, поскольку размер просмотра макета не изменяется во время масштабирования.
Мета-тег Meta-Viewport был введен Apple в 2007 году для управления видом на мобильный макет, пытаясь изменить отраслевые правила просмотра просмотра 980. Параметры, связанные с видом на просмотр:
Значением ширины может быть ширина устройства или конкретное значение, но некоторые телефоны Android не поддерживают конкретное значение, а полная серия iOS поддерживает
width=device-width, initial-scale=1.0 написана вместе.Максимальная шкала разрешена для масштабирования пользователя [Safari не поддерживает] максимальная шкала = ширина экрана (Dip Independent Pixels, DIP) / Визуальная ширина просмотра
Максимальная шкала, которая позволяет пользователю масштабировать минимальную ширину экрана (независимые пиксели, DIP) / Визуальная ширина порта просмотра
Разрешить ли пользователи масштабировать страницу через пальцы [Safari не поддерживает]
Настройка для покрытия может решить проблему белого пространства на [Notch Ecrece]
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover " >1. Зачем вам адаптироваться? Из -за различных размеров экрана мобильных устройств будет: один и тот же элемент будет показывать различные эффекты на два разных телефона (разные пропорции). Если один и тот же элемент отображается на разных устройствах, он должен быть адаптирован. Независимо от того, какой метод адаптации используется, центральный принцип всегда: равное сравнение!
Есть три основных метода адаптации:
EM и REM - оба единицы длины в CSS. И оба являются относительной длиной, но они немного разные
В соответствии с идеальным видоугольником проект проекта (DIP равен 375px) используется в качестве стандарта, а корневой шрифт составляет 100px, чтобы соответствовать падению других устройств.
В идеальном толе просмотра установите корневой шрифт на Dip/10, то есть сравните DIP с 10 REM, учитывая, сколько внутренних элементов заняты
1 VW = 1% от ширины просмотра макета 2 VH = 1% от высоты просмотра макета
Просмотр совместимости: caniuse.com
1px на экране HD соответствует большему количеству физических пикселей (небольшие лампочки), поэтому граница с 1 пикселем выглядит толще. Решение заключается в следующем:
@media screen and ( -webkit-min-device-pixel-ratio : 2 ){
# demo {
border : solid 0.5 px black;
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ){
# demo {
border : solid 0.333 px black;
}
}Список мобильных событий
Приведенные выше события впервые появились в сафари для iOS, чтобы передать некоторую специальную информацию разработчикам
Уведомление:
После того, как событие Touch завершено, событие Click элемента будет запускается по умолчанию. Если идеальный просмотр не установлен, интервал времени для события составляет около 300 мс. Если установлен идеальный просмотр, интервал времени составляет около 30 мс (в зависимости от конкретных характеристик устройства).
Если событие Touch заставляет элемент быть скрытым, действие Click будет действовать на элементе за ним, запуская событие Click или прыжок на странице нового элемента. Это явление называется проникновением щелчка .
Блокировать поведение по умолчанию
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) Сделайте элементы за кулисами, не имея характеристик клика и измените их на обычные теги Div:
< div id =" baidu " >点我去百度</ div >Используйте событие Touchend и нажмите, чтобы перейти на новую веб -страницу
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) Используйте атрибут «Повествования-эвоя» в CSS, чтобы временно потерять событие Click и восстановить его через 300 миллисекунд:
# baidu {
display : block;
width : 100 % ;
height : 300 px ;
background-color : skyblue;
pointer-events : none;
} btn . addEventListener ( 'touchend' , ( ) => {
shade . style . display = 'none'
setTimeout ( ( ) => {
baidu . style . pointerEvents = 'auto' // 恢复正常
} , 300 ) ;
} ) Пусть скрытые элементы задерживаются примерно на 300 миллисекунд, прежде чем скрывать их
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
