Comentario: 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?
Con la popularidad de los teléfonos móviles de alta gama (Andriod, iPhone, iPod, winphone, etc.), el desarrollo de la aplicación 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? Aprender el uso de la vista HTML5 puede ayudarlo a hacer esto ...
Introducción de sintaxis en la vieve:
<!-Documento HTML->
<meta
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]
"
/>
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
Correspondiente al ancho, especifique la altura.
densidad objetivoDPI
La densidad de píxeles de una 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.
Alto DPI: use HDPI como DPI objetivo. Los dispositivos de densidad de píxeles medianos y bajos se reducen en consecuencia.
DPI medio: 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. Este valor debe variar de 70–400.
<!-Documento HTML->
<Meta Content = "Target-densityDPI = dispositivo-DPI" />
<Meta Content = "Target-densityDPI = High-DPI" />
<Meta Content = "Target-densityDPI = Medium-DPI" />
<Meta Content = "Target-densityDPI = Low-DPI" />
<meta content = "objetivo-densidadDPI = 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 máximo. 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:
(Establezca el ancho de la pantalla en el ancho del dispositivo y prohíbe que los usuarios ajusten manualmente el zoom)
<meta name = viewport content = width = dispositivo-width, user-scalable = no />
(Establezca la densidad de pantalla para ampliar automáticamente la alta frecuencia, la frecuencia media y la baja frecuencia, y prohíbe que los usuarios ajusten manualmente el zoom)
<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/>