Análisis de las etiquetas de la ventana gráfica y el uso relacionado de CSS en el desarrollo móvil HTML5

Este artículo presenta principalmente la etiqueta de la vista y el análisis de uso de CSS relacionado en el desarrollo móvil HTML5. Viewport a menudo se llama ventana gráfica o ventana gráfica, y juega un papel importante en el diseño móvil y la adaptación de la pantalla. Los amigos que lo necesitan pueden referirse a él.

La vista (Viewport) se menciona comúnmente en el front-end móvil es el área de la pantalla donde el navegador muestra el contenido de la página. Varios conceptos importantes involucrados son la relación entre DIP (píxel lógico del dispositivo de píxel independiente del dispositivo) y píxeles CSS. Aquí entendemos primero los siguientes conceptos.

En general, los navegadores en dispositivos móviles establecen una metaetiqueta de la vista de visión por defecto, definiendo una vista de diseño virtual para resolver el problema de la visualización de la página temprana en los teléfonos móviles. iOS y Android básicamente establecen la resolución de esta ventana gráfica a 980px, por lo que las páginas web en la PC básicamente pueden presentarse en el teléfono, pero los elementos se ven muy pequeños, y las páginas web generalmente se pueden escalar manualmente de manera predeterminada.

Visual Viewport (Visual Viewport) proporciona el área visual de la pantalla física, los píxeles físicos de la pantalla de la pantalla, el mismo tamaño de la pantalla, el dispositivo con alta densidad de píxeles y los píxeles de hardware serán más. Por ejemplo, los píxeles físicos del iPhone:

iPhone5: 640 * 1136

iPhone 6: 750 * 1334

iPhone6 ​​Plus: 1242 * 2208

Viewport y inmersión ideales (píxeles lógicos del dispositivo)

Viewport ideal suele ser lo que llamamos resolución de pantalla.

DIP (Pixel lógica del dispositivo) no tiene nada que ver con el píxel de hardware del dispositivo. Una caída ocupa el mismo espacio en una pantalla de dispositivo de cualquier densidad de píxeles.

Por ejemplo, los píxeles de hardware de la pantalla de la pantalla Retina de MacBook Pro son: 2880 * 1800. Cuando establece la resolución de la pantalla en 1920 * 1200, el valor de ancho de la ventana gráfica ideal es 1920 píxeles, y el valor de ancho de la caída es 1920. La relación de píxel del dispositivo es 1.5 (2880/1920). La relación entre el ancho lógico del píxel y el ancho físico del píxel (resolución de píxeles) del dispositivo satisface la siguiente fórmula:

La resolución de la pantalla del teléfono móvil generalmente no está permitida. Generalmente es un valor fijo establecido por el fabricante del dispositivo de forma predeterminada. En otras palabras, el valor de DIP es el valor de la ventana gráfica ideal (es decir, la resolución). Por ejemplo, la resolución de pantalla del iPhone:

iPhone5: Resolución 320*568, píxeles físicos 640*1136, @2x

iPhone6: resolución 375*667, píxeles físicos 750*1334, @2x

iPhone6 ​​Plus: Resolución 414 * 736, píxeles físicos 1242 * 2208, @3x, (tenga en cuenta que la relación de imagen mostrada real se reduce a 1080 × 1920, las razones específicas se introducirán al final de nuestro artículo)

Unidades CSS Pixels (PX) utilizadas para el diseño de la página. El tamaño de píxel del estilo (por ejemplo, ancho: 100px) se especifica en píxeles CSS. La relación de los píxeles CSS a DIS es la relación de escala de la página web. Si la página web no está escala, entonces un píxel CSS corresponde a un DIP (píxel lógico del dispositivo).

Use la metaetiqueta de la vista para controlar el diseño

Primero, echemos un vistazo a las propiedades extremas de la metaetiqueta de la ventana gráfica: