Mobile Development
1.0.0
Se refiere a la longitud diagonal de la pantalla, en pulgadas. Los tamaños comunes incluyen: 3.5 pulgadas, 4.0 pulgadas, 5.0 pulgadas, 5.5 pulgadas, 6.0 pulgadas, etc.
Nota: 1 pulgada (pulgada) = 2.54 cm (cm)
Se refiere al número total de puntos de píxeles físicos en la pantalla en las direcciones horizontales y verticales, que generalmente está representada por N * m. Por ejemplo: la resolución de pantalla de iPhone6 es: 750 * 1334
| modelo | Resolución (suma de píxeles físicos) |
|---|---|
| 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 |
También conocido como: densidad de píxeles de pantalla, se refiere al número de puntos de píxeles físicos contenidos en cada pulgada en la pantalla. La unidad es PPI (píxeles por pulgada). De hecho, hay otra unidad DPI (puntos por pulgada). Los métodos de cálculo de los dos valores son los mismos, pero los escenarios de uso son diferentes. PPI se usa principalmente para medir pantallas, y DPI se usa principalmente para medir impresoras, proyectores, etc.
Los píxeles físicos, también conocidos como píxeles de dispositivo , son una unidad de longitud (PX). Un píxel físico es un punto de imagen física en la pantalla, que es un pequeño componente físico luminiscente (que puede entenderse simplemente como una bombilla de luz súper pequeña), que es la granularidad mínima que la pantalla puede mostrar. El número físico de puntos de píxeles (resolución) de la pantalla es un parámetro importante de la pantalla del teléfono móvil y el fabricante de la pantalla determina y no puede modificarse después de la producción . Por ejemplo, los píxeles físicos que iPhone6 tiene en la dirección horizontal son 750, y los píxeles físicos que tienen en la dirección vertical son 1334, que está representada por 750*1334.
CSS Pixel también se conoce como: Pixel lógico. El píxel CSS es una unidad abstracta de longitud, y la unidad también es PX. Se crea para que los desarrolladores web midan con precisión el tamaño del contenido en una página web. Usamos píxeles CSS al escribir CSS JS Less.
Los píxeles independientes del dispositivo se denominan DIP o DP (píxel independiente del dispositivo), también conocido como: píxeles independientes de la densidad de pantalla.
Introducción: en la época en la que [pantalla HD] no apareció, 1 CSS Pixel corresponde a 1 píxel físico, pero desde la aparición de [pantalla HD], los dos ya no son una relación de 1 a 1. En 2010, Apple lanzó un nuevo estándar de visualización: comprimir más puntos de píxeles físicos en una pantalla, mientras que el tamaño de la pantalla permanece sin cambios , de modo que la resolución será mayor y el efecto de visualización será mejor y más delicado. Apple llama a esta pantalla: pantalla Retina (también conocida como pantalla Retina) , y al mismo tiempo lanzó el producto digital de fabricación de época equipado con esta pantalla: el iPhone 4.
El programador escribió: Width = 2px, Height = 2px Box. Si un píxel CSS corresponde directamente a 1 píxel físico, dado que el tamaño de la pantalla de iPhone3G/S y iPhone4 es el mismo que la de iPhone4, la pantalla de iPhone4 puede acomodar más píxeles físicos, por lo que los píxeles físicos de iPhone4 son mucho más pequeños que la de iPhone3G/s. En teoría, este cuadro será mucho más pequeño en la pantalla iPhone4 que en la pantalla iPhone3G/S. ¡El hecho es que iPhone3G/S es del mismo tamaño que iPhone4! ! ! , pero el iPhone 4 es más delicado y claro. ¿Cómo hacerlo? Esto depende de los píxeles independientes del dispositivo. 
La aparición de píxeles independientes del dispositivo hace que los elementos tengan tamaños normales incluso en la [pantalla HD]. S hace que el código no sea afectado por el dispositivo. El fabricante del dispositivo establece de acuerdo con las características de la pantalla y no se puede cambiar.
Relación de píxeles (DPR, relación de píxeles del dispositivo): la relación de [píxel físico] y [píxel independiente del dispositivo] en una sola dirección. Es decir: DPR = píxeles físicos/píxeles independientes del dispositivo
| modelo | Resolución (suma de píxeles físicos) | Píxeles independientes del dispositivo (DIP o DP) | Relación de píxeles (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
Diagramas de mapa de bits y vectores
Un píxel de imagen de bits también es una unidad de longitud. Un píxel de imagen bit se puede entender como una "cuadrícula pequeña" en un mapa de bits, que es la unidad más pequeña de un mapa de bits.
En la actualidad, solo el logotipo debe mostrarse en alta definición, o el logotipo de formato SVG se puede proporcionar para resolver el problema. De lo contrario, se utiliza la consulta de medios:
@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)
}
}En el lado de la PC, el ancho predeterminado de la ventana gráfica es el mismo que el ancho de la ventana del navegador. En el documento estándar CSS, también se llama Viewport: Inicialmente que contiene bloques, que es la causa raíz de todos los cálculos de porcentaje de ancho de CSS. En el lado de la PC, el ancho se puede obtener de las siguientes maneras:
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; En los dispositivos móviles, los fabricantes de navegadores enfrentan un problema relativamente grande: ¿cómo presentan decenas de miles, incluso cientos de millones de páginas web de PC en dispositivos móviles de manera completa sin barras de desplazamiento horizontal? Luego necesitamos introducir tres conceptos de terminales móviles: 1. Viewport de diseño, 2. Visual Viewport, 3. Viewport ideal
Se utiliza para resolver el problema de la pantalla de la página temprana en los teléfonos móviles. En los primeros días, hicimos esto: el ancho de las páginas web de PC es generalmente: 960px El rango de 1024px, incluso si excede este rango, 960px El área de 1024px sigue siendo la ubicación del cuerpo principal.
Los fabricantes de navegadores han diseñado un contenedor para dispositivos móviles. Primero, use este contenedor para mantener la página web en la PC. El ancho de este contenedor es generalmente 980px . Los diferentes dispositivos pueden diferir, pero la diferencia no es grande. Luego, el contenedor se comprime igualmente proporcionalmente al mismo ancho que el teléfono móvil, de modo que no hay una barra de desplazamiento y la página puede presentarse completamente. Sin embargo, todavía hay problemas para hacer esto: el contenido de la página web está comprimido demasiado pequeño, lo que afecta seriamente la experiencia del usuario.
Cómo obtener visiones de visualización de diseño en la terminal móvil: document.documentElement.clientWidth (generalmente 980px, iPad Pro es 1024px)
Nota: Después de que se comprime la vista de diseño, el ancho horizontal ya no es de 375 px, sino 980px, porque la vista de la ventana de diseño está comprimida, no interceptada.
Visual Viewport es el área visible para el usuario. Su ancho absoluto es siempre tan ancho como la pantalla del dispositivo, pero el valor de los píxeles CSS contenidos en este ancho varía. Por ejemplo: en general, los teléfonos móviles colocarán 980 píxeles CSS en el Visual Viewport (Visual Viewport Size = Diseño del tamaño de la visión) , mientras que iPad Pro pondrá 1024 píxeles CSS en la vista visual.
La forma de obtener la vista visual en la terminal móvil: window.innerWidth , pero no se puede obtener correctamente en Android 2, Opera Mini y UC8. (Generalmente, la vista visual no se ve a través del código)
Si toma el iPhone 6 como ejemplo, describa la pantalla:
Una ventana gráfica de diseño que es igual al ancho de la pantalla (DP/DIP) se denomina ventana gráfica ideal, por lo que también se puede decir que una ventana gráfica ideal es un estándar: el ancho de la vista de diseño y la pantalla (DP/DIP) se logran mediante metaets.
Métodos específicos para configurar una ventana gráfica ideal:
< meta name =" viewport " content =" width=device-width " >【Resumir】:
1. Descripción Pantalla: Píxeles físicos: 750p ×, Píxeles independientes del dispositivo: 375px, CSS Pixels: 980px. 2. Ventajas: el efecto de representación de los elementos en diferentes dispositivos es casi el mismo, ya que están escalados por contenedores de diseño, como 200 cuadros anchos: 200/980 3. Desventajas: los elementos son demasiado pequeños, el texto de la página no está claro y la experiencia del usuario no es buena.
1. Descripción Pantalla: Píxeles físicos: 750px, Píxeles independientes del dispositivo: 375px, CSS Pixels: 375px. 2. Ventajas: la página se muestra claramente, el contenido ya no es tan pequeño como difícil de observar y la experiencia del usuario es mejor. 3. Desventajas: el mismo elemento tiene diferentes efectos de renderizado en diferentes pantallas (dispositivos). Por ejemplo, el cuadro 375-ancho: 375/375 y 375/414 (no exhibición igual a equivalente). 4. Cómo resolverlo: hacer adaptación.
Al zoom en:
Reduce el tamaño:
Proceso de algoritmo: al ampliar, el navegador intercepta una cierta proporción de área hacia adentro, y luego llena inmediatamente la imagen restante con proporciones iguales a toda la ventana gráfica, y los elementos que no se pueden dejar se envolverán automáticamente.
Script de monitoreo:
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} Al zoom en:
Nota: La escala móvil no afectará el diseño de la página, porque el tamaño del diseño de la vista no cambia durante la escala.
Apple introdujo la etiqueta de Meta-Viewport en 2007 para controlar la ventana móvil del diseño, intentando cambiar las reglas de la industria de la vista de la vista 980 de diseño. Opciones relacionadas con la ventana gráfica:
El valor de ancho puede ser de ancho de dispositivo o valor específico, pero algunos teléfonos Android no admiten un valor específico, y la serie completa de iOS admite
width=device-width, initial-scale=1.0 se escribe juntos.La escala máxima permitida para la escala del usuario [Safari no es compatible] a escala máxima = ancho de pantalla (píxeles independientes de inmersión, inmersión) / ancho de la vista visual
Escala máxima que permite al usuario escala mínima a escala = ancho de pantalla (píxeles independientes de inmersión, inmersión) / Visual Viewport Ancho
Si permitir que los usuarios amplíen la página a través de sus dedos [Safari no admite]
La configuración para cubrir puede resolver el problema del espacio en blanco en [pantalla de muesca]
< 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. ¿Por qué necesitas adaptarte? Debido a los diferentes tamaños de pantalla de los dispositivos móviles, habrá: el mismo elemento mostrará diferentes efectos en dos teléfonos diferentes (proporciones diferentes). Si se muestra el mismo elemento en diferentes dispositivos, debe adaptarse. No importa qué método de adaptación se utilice, el principio central es siempre: ¡igual comparación!
Hay tres métodos de adaptación convencionales:
EM y REM son ambas unidades de longitud en CSS. Y ambas son unidades de longitud relativa, pero las dos son un poco diferentes
Según la ventana gráfica ideal, el borrador de diseño (DIP es 375px) se usa como estándar y la fuente raíz es de 100px para que coincida con la salsa de otros dispositivos.
En la ventana gráfica ideal, establezca la fuente de la raíz en DUS/10, es decir, compare la inmersión con 10 REM, considerando cuántos elementos internos están ocupados
1 VW = 1% del ancho de la visión del diseño 2 VH = 1% de la altura de la vista de diseño
Ver compatibilidad: caniuse.com
1px en la pantalla HD corresponde a más píxeles físicos (bombillas pequeñas), por lo que el borde de 1 píxel se ve más grueso. La solución es la siguiente:
@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;
}
}Lista de eventos móviles
Los eventos anteriores aparecieron por primera vez en iOS Safari para transmitir información especial a los desarrolladores.
Aviso:
Una vez finalizado el evento táctil, el evento de clic del elemento se activará de forma predeterminada. Si no se establece la ventana gráfica perfecta, el intervalo de tiempo para el evento es de aproximadamente 300 ms. Si se establece la vista perfecta, el intervalo de tiempo es de aproximadamente 30 ms (dependiendo de las características específicas del dispositivo).
Si el evento táctil hace que el elemento esté oculto, la acción de clic actuará en el elemento detrás de él, activando el evento de clic o el salto de página del nuevo elemento. Este fenómeno se llama Penetración de clics .
Bloquear el comportamiento predeterminado
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) Haga que los elementos detrás de escena no tengan características de clic y los modifiquen a etiquetas DIV normales:
< div id =" baidu " >点我去百度</ div >Use el evento Touchend y haga clic para saltar a la nueva página web
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) Use el atributo de eventos de puntero en CSS para perder temporalmente el evento de clic y restaurarlo después de 300 milisegundos:
# 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 ) ;
} ) Deje que los elementos ocultos se retrasen en unos 300 milisegundos antes de esconderlos
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
