Comentario: Con la popularidad de los teléfonos móviles de alta gama (Andriod, iPhone, iPod, winphone, etc.), el desarrollo de aplicaciones de Internet móvil también recibe más y más atención de las personas. El uso de HTML5 para desarrollar aplicaciones móviles es la mejor opción. Sin embargo, cada teléfono tiene diferentes resoluciones y tamaños de pantalla. ¿Cómo pueden la aplicación o el tamaño de la página que desarrollamos ser adecuado para su uso en varios teléfonos de alta gama? Aprenda la vista de la vista HTML5
Introducción de sintaxis en la vieve:
<!- Documento HTML->
<meta name = Viewport
contenido =
altura = [Pixel_Value | altura del dispositivo],
ancho = [Pixel_Value | ancho del dispositivo],
escala inicial = float_value,
escala mínima = float_value,
máxima escala = float_value,
usador-calable = [sí | No] ,
Target-densityDPI = [dpi_value | dispositivo-DPI | High-DPI | Medium-DPI | DPI bajo]
/>
Explicación del parámetro:
ancho
—-controla el tamaño de la ventana gráfica, que puede especificarse como un valor o un valor especial, como el ancho del dispositivo, que es el ancho del dispositivo (unidades de los píxeles del CSS cuando se escalan al 100%.
altura
—— correspondía al ancho, especificando la altura.
densidad objetivoDPI
- La densidad de un píxel de pantalla está determinada por la resolución de la pantalla y generalmente se define como el número de puntos por pulgada (DPI). Android admite tres densidad de píxeles de pantalla: baja densidad de píxeles, densidad de píxeles medianos y alta densidad de píxeles. Una pantalla de densidad de píxeles bajas tiene menos píxeles por pulgada, mientras que una pantalla de densidad de píxeles alta tiene más píxeles por pulgada. Android Browser y WebView tienen una densidad de píxeles medios de forma predeterminada.
A continuación se muestra el rango de valor del atributo de DISSIONDPI de destino objetivo
Dispositivo-DPI: use el DPI original del dispositivo como el DP de destino. El zoom predeterminado no se produce.
High-DPI: use HDPI como DPI objetivo. Los dispositivos de densidad de píxeles medianos y bajos se reducen en consecuencia.
Medium-DPI: use MDPI como DPI objetivo. El dispositivo de densidad de píxeles altas se amplía en consecuencia, y el dispositivo de densidad de píxeles se reduce en consecuencia. Esta es la densidad objetivo predeterminada.
DPI bajo: use MDPI como DPI objetivo. Los dispositivos de densidad de píxeles medios y altos se amplifican en consecuencia.
<valor>: especifique un valor de DPI específico como DPI objetivo. El rango de este valor debe estar entre 70-400.
<!- Documento HTML->
<Meta name = Viewport Content = Target-DensityDPI = dispositivo-DPI />
<meta name = Viewport Content = Target-DensityDPI = High-DPI />
<meta name = Viewport Content = Target-densityDPI = Medium-DPI />
<meta name = Viewport Content = Target-densityDPI = Low-DPI />
<meta name = Viewport Content = Target-densityDPI = 200 ″ />
Para evitar que el navegador de Android y WebView escalen sus páginas en función de la densidad de píxeles de diferentes pantallas, puede establecer el DISSIONDPI objetivo de la ventana gráfica a DISVICE-DPI. Cuando hagas esto, la página no escala. En cambio, la página se muestra en función de la densidad de píxeles de la pantalla de corriente. En este caso, también debe definir el ancho de la ventana gráfica para que coincida con el ancho del dispositivo para que su página pueda adaptarse a la pantalla.
escala inicial
— - Escala inicial. Es decir, el nivel de zoom inicial de la página. Este es un valor de punto flotante, un multiplicador del tamaño de la página. Por ejemplo, si establece la escala inicial en 1.0, la página web se mostrará con una resolución 1: 1 de la densidad de destino. Si lo establece en 2.0, esta página se ampliará a 2x.
a escala máxima
— - zoom de maximismo. Ese es el grado de escala máximo permitido. Este también es un valor de punto flotante que indica el multiplicador máximo del tamaño de la página en comparación con el tamaño de la pantalla. Por ejemplo, si establece este valor en 2.0, esta página se puede ampliar hasta 2 veces en comparación con el tamaño objetivo.
escalonado por el usuario
—— El usuario ajusta el zoom. Es decir, si el usuario puede cambiar el nivel de zoom de la página. Si se establece en sí, el usuario le permitirá cambiarlo, de lo contrario es no. El valor predeterminado es sí. Si lo establece en NO, se ignorará tanto a escala mínima como a escala máxima porque la escala simplemente no es posible.
Todos los valores de escala deben estar dentro del rango de 0.01-10.
Ejemplo: 1. Establezca el ancho de la pantalla en el ancho del dispositivo, prohibiendo a los usuarios ajustar manualmente el zoom
<meta name = viewport content = width = dispositivo-width, user-scalable = no />
2. Establezca la densidad de pantalla en escala automática de alta frecuencia, frecuencia media y baja frecuencia, y prohíbe a los usuarios ajustar manualmente la escala
<meta name = viewport content = width = dispositivo-width, objetivo-densidadDPI = high-dpi, inicial a escala = 1.0, mínima a escala = 1.0, máxima escala = 1.0, usador = no/>