Discusión sobre el tamaño de los sitios web en el sitio web de la pantalla táctil de edificios HTML5

Este artículo se divide en dos partes. La primera parte discute la viabilidad de los sitios web multiplataforma, y ​​la segunda parte discute cómo se configura la vista.

Es cierto que el ancho y la altura de la etiqueta pueden ser adaptables, podemos hacerlo muy temprano. Pero encontrará que muchos sitios web de PC tradicionales aún corrigen el ancho. (Taobao usa el ancho de 1000px, SOHU 950px ...) ¿Por qué no permitimos que el sitio web se adapte al ancho y la altura? Esto se debe a que si dejamos que el ancho de la etiqueta sea estirado arbitrariamente por el navegador, conducirá a una experiencia muy pobre: ​​no querrá que su barra izquierda se convierta en fideos cuando el navegador se escala a 100px; Tampoco querrá que su sitio web se vea como una netbook para un estudiante de la escuela primaria cuando el navegador esté demasiado estirado. Por lo tanto, no es realista confiar en la adaptación de la etiqueta para lograr las plataformas cruzadas y está a expensas de la experiencia del usuario. Muchas veces tenemos que arreglar el ancho y la altura.

Confiamos en el dispositivo HTML5 para verificar si el dispositivo actual es un teléfono móvil o una tableta, y cargamos el CSS correspondiente en consecuencia. Por ejemplo: si detecta que su dispositivo es una tableta, puedo mostrar tres columnas horizontalmente, y si es un teléfono móvil, solo mostraré una columna. Esto no suena difícil, pero es muy complicado de implementar. No solo necesitamos desarrollar múltiples conjuntos de plantillas para diferentes dispositivos, sino también procesar el tamaño de la imagen. En este sentido, podemos ver cómo el Boston Globe usa HTML5 para implementar un diseño receptivo.

En general, lograr sitios web multiplataforma es demasiado costoso y restringido para la mayoría de los sitios web. Si es factible depende de la situación real del sitio web.

Los navegadores móviles colocan la página en una ventana virtual (vista). Por lo general, la ventana virtual (Viewport) es más ancha que la pantalla, de modo que cada página web no tiene que exprimir cada página web en una ventana muy pequeña (esto destruirá el diseño de la página web que no está optimizada para los navegadores móviles). Los usuarios pueden ver diferentes partes de la página web a través de la panorámica y el zoom. Los navegadores móviles han introducido la metaetiqueta de la ventana gráfica, lo que permite a los desarrolladores web controlar el tamaño y la escala de la ventana gráfica.

Píxeles CSS: unidades abstractas utilizadas por los navegadores, utilizadas principalmente para dibujar contenido en las páginas web.

Píxeles del dispositivo: muestra la unidad física mínima de la pantalla, cada DP contiene su propio color y brillo.

No se fija la cantidad de píxeles CSS con valores equivalentes en la pantalla del teléfono, depende de muchos atributos. Después del análisis y el resumen, podemos crear una fórmula: 1 CSS píxeles = (DevicePixelratio)^2 píxeles del dispositivo (^2 significa cuadrado. En cuanto a qué dispositiva es la forma del dispositivo, se explicará más adelante).

PPI, a veces también llamado DPI, representa el número de píxeles por pulgada. Cuanto mayor sea el valor, mayor será la pantalla puede mostrar imágenes. (Nota: Los píxeles aquí se refieren a los píxeles del dispositivo). Después de descubrir qué significa PPI, podemos entender fácilmente el método de cálculo de PPI. Primero debemos calcular los píxeles diagonales equivalentes de la pantalla del teléfono móvil, y luego colocar la diagonal (el tamaño de la pantalla del teléfono móvil es la longitud de la línea diagonal de la pantalla del teléfono móvil), y podemos obtener el PPI. Para anuncios de cálculo precisos, puede consultar la figura a continuación. Lo que es más interesante es que el PPI del iPhone 4 calculado en base a la fórmula es 330, que es un poco más alto que el 326 oficialmente anunciado por Apple.

Del mismo modo, tomando HTC G7 como ejemplo, la resolución de 480*800 y 3.7 pulgadas se calcula como un PPI de 252.

Calculamos PPI para saber a qué intervalo de densidad pertenece un dispositivo de teléfono móvil, porque los diferentes intervalos de densidad corresponden a diferentes relaciones de escala predeterminadas, lo cual es un concepto muy importante.

De la figura anterior, se puede ver que los teléfonos móviles con PPI entre 120-160 se clasifican como teléfonos móviles de baja densidad, 160-240 se clasifican como densidad media, 240-320 se clasifica como alta densidad y por encima de 320 se clasifica como densidad ultra-alta (la manzana le dio un nombre de rayo arriba y retina).

Estas densidades corresponden a un valor de escala específico. Tome el iPhone 4 o 4S con el que estamos más familiarizados, su PPI es 326, que es un teléfono móvil de densidad ultra alta. Cuando escribimos una página con un ancho de 320px y la ponemos en el iPhone para mostrar, encontrará que en realidad es un ancho completo. Esto se debe a que la página se amplía dos veces por defecto, es decir, 640px, mientras que el ancho del iPhone 4 o 4S es exactamente 640px.

La imagen rodea el tipo de alta densidad porque estos son los datos estadísticos de los teléfonos Android. En el mercado nacional de teléfonos Android, los dispositivos de alta densidad representan la gran mayoría de la cuota de mercado. Este es un punto muy importante y también es un punto clave al que debemos prestar atención al hacer una aplicación web de Android.

Viewport tiene un total de 5 atributos, como sigue:

<meta name = "Viewport"

contenido = "

altura = [Pixel_Value | altura del dispositivo],

ancho = [Pixel_Value | ancho del dispositivo],

escala inicial = float_value, mínimo a escala = float_value, máxima escala = float_value, máxima escala = float_value,

usador-calable = [sí | No] ,

Target- densidadDpi = [dpi_value | dispositivo-DPI | High-DPI | Medium-DPI | bajo-DPI] " />

Entre estas propiedades, nos centramos en el DISSIONDPI objetivo , que puede cambiar la escala predeterminada del dispositivo. Medium-DPI es el valor predeterminado de Target-DISTIONDPI. Si definimos el DISTSIONDPI de TargetDPI = dispositivo-DPI, el dispositivo representará la página de acuerdo con el DPI real. Por ejemplo, si se coloca una imagen 320*480 en el iPhone 4, ocupará la pantalla de forma predeterminada, pero si el objetivo DISSIONDPI = DVICE-DPI se define, entonces la imagen solo representa una cuarta parte de la pantalla (la mitad del cuadrado) porque la resolución del iPhone 4 es 640*960.

Si hacemos la página de acuerdo con el borrador de diseño de 320px de ancho y no realizamos ninguna configuración, la página escalará automáticamente a un ancho igual a la pantalla del teléfono móvil de forma predeterminada (esto se debe a que el DPI medio es el valor predeterminado de DISTSIONDPI de Target, y está determinado por diferentes relaciones de escala correspondientes a diferentes densidades, todos los cuales se realizan automáticamente por dispositivos móviles). Entonces, esta solución es simple, áspera y efectiva. Pero hay una desventaja fatal. Para dispositivos móviles de alta densidad y ultra alta densidad, las páginas (especialmente las imágenes) se distorsionarán y cuanto más denso sea más distorsionado.

En esta solución, utilizamos Target-DISTISDPI = dispositivo-DPI, de modo que el dispositivo de teléfono móvil renderice de acuerdo con el número real de píxeles. En términos profesionales, son 1 css píxeles = 1 píxeles del dispositivo. Por ejemplo, para un iPhone con 640*960, podemos crear una página con 640*960, y no habrá barras de desplazamiento cuando se muestre en el iPhone. Por supuesto, para otros dispositivos, también se requieren páginas de diferentes tamaños, por lo que esta solución a menudo se usa para usar consultas de medios para hacer páginas receptivas. Esta solución puede presentarse perfectamente a una resolución específica, pero con resoluciones más diferentes para ser compatible, cuanto mayor sea el costo, ya que se requieren códigos separados para cada resolución. Aquí hay un ejemplo simple:

<Meta name = "Viewport" content = "Target- densidadDPI = dispositivo-DPI, width = dispositivo-width" />

#Header {

Antecedentes: URL (mediana densidad-imagen.png);

}

@Media Screen y (-WebKit -Device-Pixel-Ratio: 1.5) {

/ * CSS para pantallas de alta densidad */

#Header {Background: URL (High-density-image.png);}

}

@Media Screen y (-WebKit -Device-Pixel-Ratio: 0.75) {

/ * CSS para pantallas de baja densidad */

#Header {Background: url (baja densidad-image.png);}

Para la gran mayoría de los dispositivos Android, las características de alta densidad y densidad media, podemos adoptar una solución de compromiso: restauramos el borrador de diseño de 480px de ancho, pero el sistema de página está hecho a 320px de ancho (usando el tamaño de fondo para reducir la imagen), y luego dejamos que la página se escala automáticamente a escala. De esta manera, los teléfonos de baja densidad tienen barras de desplazamiento (básicamente nadie está usando este tipo de teléfono), los teléfonos de densidad media desperdiciarán un poco de tráfico, los teléfonos de alta densidad se presentarán perfectamente y los teléfonos de ultra alta densidad distorsionarán ligeramente (muy pocos teléfonos androides de densidad ultra alta). Las ventajas de esta solución son muy obvias: solo se requiere un conjunto de borradores de diseño y un conjunto de códigos (aquí solo está discutiendo la situación de los teléfonos Android).