Cómo adaptarse a teléfonos móviles con diferentes resoluciones y diferentes tamaños de pantalla
Antecedentes
Desarrollar páginas H5 móviles
Vista de teléfonos móviles con diferentes resoluciones
Vista de teléfonos móviles con diferentes tamaños de pantalla
p>
Borrador visual
Antes del desarrollo front-end, Visual MM nos dará un archivo psd, llamado borrador visual.
Para el desarrollo móvil, para lograr el efecto de alta definición de la página, las especificaciones del borrador visual a menudo siguen los dos puntos siguientes:
Primero, seleccione el ancho de la pantalla y altura de un teléfono móvil como base (solía ser 320×480 para el iPhone 4, pero ahora es más 375×667 para el iPhone 6).
Para las pantallas retina (p. ej.: dpr=2), para lograr efectos de alta definición, el tamaño del lienzo del borrador visual será 2 veces la línea base, lo que significa que el número de píxeles será 4 veces el original (para iPhone6 Por ejemplo: el original 375×667 pasará a ser 750×1334).
Pregunta:
Para teléfonos móviles con dpr=2, ¿por qué el tamaño del lienzo × 2 puede resolver el problema de la alta definición?
Para un borrador visual que es 2 veces el tamaño. ¿Cómo restaurar el ancho y alto verdaderos de cada bloque (es decir, problema de diseño) en una codificación CSS específica?
Si tiene preguntas, mire hacia abajo
Algunos conceptos
Antes de realizar un análisis específico, primero debe conocer los siguientes conceptos básicos clave (terminología).
Píxel físico (píxel físico)
Un píxel físico es la unidad de visualización física más pequeña en la pantalla (pantalla del teléfono móvil). Según la programación del sistema operativo, cada píxel del dispositivo tiene. sus propios valores de color y brillo.
Píxel independiente del dispositivo (píxel independiente de la densidad)
El píxel independiente del dispositivo (también llamado píxel independiente de la densidad) puede considerarse como un punto en el sistema de coordenadas de la computadora. punto representa un punto que puede ser Píxeles virtuales utilizados por programas (por ejemplo: píxeles css) y luego convertidos en píxeles físicos por el sistema correspondiente.
Entonces, existe una cierta correspondencia entre los píxeles físicos y los píxeles independientes del dispositivo. Esta es la proporción de píxeles del dispositivo de la que hablaremos a continuación.
Proporción de píxeles del dispositivo (proporción de píxeles del dispositivo)
La proporción de píxeles del dispositivo (dpr para abreviar) define la correspondencia entre los píxeles físicos y los píxeles independientes del dispositivo. Su valor se puede calcular de la siguiente manera. fórmula Obtener:
1
Proporción de píxeles del dispositivo = píxel físico/píxel independiente del dispositivo
// En una dirección determinada, dirección x o dirección y
En javascript, puede obtener el dpr del dispositivo actual a través de window.devicePixelRatio.
En CSS, puedes usar -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio y -webkit-max-device-pixel-ratio para realizar consultas de medios para diferentes dpr dispositivo, realice algunas adaptaciones de estilo (esto es solo para navegadores y vistas web con webkit core).
Para resumir los conceptos anteriores, demos un ejemplo:
Tome el iPhone6 como ejemplo:
El ancho y alto del dispositivo son 375×667 , que puede entenderse como independencia del dispositivo (o píxeles CSS).
dpr es 2. Según la fórmula de cálculo anterior, los píxeles físicos deben ser ×2, que es 750×1334.
Usa una imagen para expresarlo, eso es todo (perdón por robar la imagen):
Como se puede ver en la imagen de arriba, para tal estilo CSS:
1
ancho: 2px;
2
alto: 2px;
En diferentes pantallas (pantalla normal vs retina screen), el tamaño (tamaño físico) presentado por el píxel CSS es el mismo, pero la diferencia es que el número de píxeles físicos correspondientes a un píxel CSS es inconsistente.
En una pantalla normal, 1 píxel CSS corresponde a 1 píxel físico (1:1).
En una pantalla retina, 1 píxel CSS corresponde a 4 píxeles físicos (1:4).
#p#subtitle#e#
Píxel de mapa de bits
Un píxel de mapa de bits es la imagen rasterizada más pequeña (como: png, jpg, gif, etc.) unidad de datos. Cada píxel de mapa de bits contiene parte de su propia información de visualización (como la posición de visualización, el valor del color, la transparencia, etc.).
Cuando hablamos de esto, ¿tenemos que hablar de cómo se muestra la imagen bajo la retina?
En teoría, un píxel de mapa de bits corresponde a un píxel físico, por lo que la imagen se puede visualizar perfectamente. claro.
No hay ningún problema en una pantalla normal, pero en una pantalla retina no habrá suficientes píxeles en el mapa de bits, lo que dará como resultado una imagen borrosa.
Utilice una imagen para representar:
Como se muestra en la imagen de arriba: para una pantalla retina con dpr=2, 1 píxel de mapa de bits corresponde a 4 píxeles físicos desde un solo mapa de bits. Los píxeles no se pueden dividir más, por lo que solo se puede tomar el color más cercano, lo que da como resultado una imagen borrosa (tenga en cuenta los valores de color anteriores).
Entonces, para el problema de las imágenes de alta definición, una mejor solución es duplicar la imagen (@2x).
Por ejemplo: etiqueta img de 200×300 (píxeles css), debe proporcionar una imagen de 400×600.
De esta manera, el número de píxeles del mapa de bits es 4 veces el número original. En la pantalla retina, el número de píxeles del mapa de bits puede formar una proporción de 1:1 con el número de píxeles físicos. claro de forma natural (esto también explica una pregunta que quedó antes, ¿por qué el tamaño del lienzo del borrador visual es × 2?).
Hay otra pregunta aquí. ¿Qué pasará si se usa el doble de la imagen en una pantalla normal?
Obviamente, en una pantalla normal, etiqueta img de 200×300 (píxel css). , el número correspondiente de píxeles físicos es 200 × 300 y el número de píxeles de mapa de bits del doble de la imagen es 200 × 300 * 4, por lo que un píxel físico corresponde a 4 puntos de píxeles de mapa de bits, por lo que su selección de color solo puede pasar por un cierto algoritmo (el resultado de la visualización es una imagen con solo una cuarta parte del total de píxeles de la imagen original, a este proceso lo llamamos reducción de resolución. Aunque la imagen no se verá borrosa a simple vista, sentiré que le falta algo de nitidez). , o tiene una ligera diferencia de color (pero aún así es aceptable).
Utilice una imagen para representar:
En respuesta a las dos preguntas anteriores, hice una demostración (acceso a intranet) y hice clic aquí.
En la demostración, las imágenes de 100×100 se colocan en contenedores de imágenes de 100×100, 50×50 y 25×25 respectivamente, y el efecto de visualización es en la pantalla retina.
En el gráfico de barras, se puede ver la diferencia en el valor de los píxeles del límite a través de una lupa:
Figura 2, no hay ningún color cercano, el valor del color es Ya sea rojo o blanco, la imagen se ve muy clara.
Con la imagen de la palabra amor, puedes saber si la imagen está borrosa o clara mirando la palabra "amor".
Varios problemas
A continuación se muestran algunos problemas clásicos que el desarrollo móvil de H5 encontrará en teléfonos móviles con diferentes resoluciones y pantallas.
Problema de imagen de alta definición bajo la retina
La solución a este problema se presentó anteriormente: duplicar la imagen (@2x) y luego reducir el contenedor de la imagen en un 50%.
Por ejemplo: tamaño de imagen, 400×600;
1 etiqueta.img
1
ancho: 200px;
2
alto: 300px;
2 Imagen de fondo
1
ancho: 200px;
2
alto: 300px;
3
imagen de fondo: url(image@2x.jpg);
4
fondo-tamaño: 200px 300px;
// O: fondo-tamaño: contiene;
Tales desventajas son obvias en una pantalla normal: <. /p>
Las imágenes de @2x también se descargaron, lo que resultó en un desperdicio de recursos.
Entonces, la mejor solución es cargar imágenes de diferentes tamaños bajo diferentes dprs.
Ya sea mediante consultas de medios CSS o juicios condicionales de JavaScript, es posible.
Entonces la pregunta es, en este caso, ¿no necesitamos preparar dos conjuntos de imágenes (@1x y @2x)?
Creo que a todas las empresas a las que les va bien. Tendrá dicho servidor de imágenes obtiene parámetros a través de la URL y luego puede controlar la calidad de la imagen y recortarla en diferentes tamaños.
#p#subtitle#e#
Entonces solo necesitamos cargar la imagen grande (@2x), y el resto de las imágenes pequeñas se entregarán al servidor de imágenes para su procesamiento Solo necesitamos ser responsables de empalmar la URL.
Por ejemplo, esta imagen original:
1
https:
**afXp****XX.jpg / / Imagen original
Puedes recortar la imagen así:
1
// 200×200
2
https:
**afXp****XX.jpg_200x200.jpg
3
4
// 100 × 100