¿Qué es la ventana gráfica?
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. La versión móvil de Safari Browser ha introducido recientemente la metaetiqueta de la ventana gráfica, que permite a los desarrolladores web controlar el tamaño y el zoom de la ventana gráfica, y otros navegadores móviles también lo admiten básicamente.
Conceptos básicos
La metaetiqueta de la vista de una página de uso común optimizado para páginas web móviles es más o menos como sigue:
<meta name = viewport content = width = dispositivo-width, inicial a escala = 1, máxima escala = 1 ″>
Ancho: Controla el tamaño de la ventana gráfica, que se puede especificar si 600, o un valor especial, como el ancho del dispositivo, es el ancho del dispositivo (unidades de los píxeles del CSS cuando se escalan al 100%.
Altura: corresponde al ancho, especifique la altura.
escala inicial: escala inicial, es decir, la relación de escala cuando la página se carga por primera vez.
a escala máxima: la escala máxima que permite al usuario escalar.
a escala mínima: la escala mínima que permite al usuario escala.
Calificable al usuario: ¿Puede el usuario escalar manualmente
Algunas preguntas sobre la ventana gráfica
La vista no es solo un atributo único en iOS, sino también una ventana gráfica sobre Android y WinPhone. El problema que desean resolver es el mismo, es decir, ignorar la resolución real del dispositivo y directamente a través del DPI, restableciendo la resolución entre el tamaño físico y el navegador, que no tiene nada que ver con la resolución del dispositivo. Por ejemplo, puede obtener un iPhone3 GS con 3.5 pulgadas-320 * 480, iPhone4 con 3.5 pulgadas de 640 * 960, iPhone4 con 9.7 pulgadas-1024 * 768 y iPad2 con diferentes resoluciones y tamaños físicos, puede configurar el vista para hacer que tengan la misma resolución en la navegadora. Por ejemplo, su sitio web tiene 800 px de ancho, puede establecer el ancho = 800 de la vista para que su sitio web muestre su sitio web en estos tres dispositivos diferentes de la pantalla completa.
Creo que cada estudiante que tiene un poco de comprensión de la ventana de la visión ya debería haber entendido el conocimiento anterior. Este no es el punto del que quiero hablar hoy. Lo que quiero ilustrar son algunas de las diferencias en el rendimiento de la viead en iOS y Android.
Al buscar el conocimiento en línea sobre la vista de la ventana gráfica, es básicamente toda la siguiente información:
<Meta name = Viewport Content = Width = Device-Width, inicial a escala = 1.0, máxima escala = 1.0, escala mínima = 1.0, usador = no />
Este código significa que el ancho de la ventana gráfica es igual a la resolución real en el dispositivo físico y no permite que el usuario escala. Así es como se establecen las aplicaciones web convencionales en Yidu. Su función es abandonar deliberadamente la vista y no escalar la página. De esta manera, el DPI debe ser el mismo que la resolución real en el dispositivo. Sin ninguna escala, la página web parecerá más alta y más delicada. Los estudiantes que juegan PS deben saber en qué se convertirá cuando se acerca una imagen de 1000 * 1000 directamente a 500 * 500 puntos, ¿verdad? La distorsión de la imagen no debe ser escapada.
Pero la aplicación que quiero hacer es lo contrario, y debe usar la vista y el zoom. No importa cuál sea la resolución real o cuál sea el tamaño físico, espero que haya una resolución unificada en el navegador, y que el usuario no pueda acercarse. Los dispositivos que solía probar son: iPhone4, iPad2, HTC G11, Aquos Telephone (Sistema Android), ASUS Android Pad, Dell WinPhone y encontré los siguientes problemas en el camino:
1) Si la vista se establece sin visualización, entonces el ancho predeterminado es 980. Si todos los elementos de la página son inferiores a 980, entonces el ancho es 980. Si el ancho de la página excede 980, entonces el ancho es igual al ancho máximo. En resumen, toda la página se puede mostrar de izquierda a derecha de forma predeterminada. Si establece la vista de la visión, por ejemplo, simplemente configure el usuario escalable = no, por ejemplo <meta name = viewport content = user-scalable = no />, entonces el ancho bajo iOS aún se mostrará en 980 (es decir, la resolución de la configuración real y la resolución de la resolución de la configuración real y la resolución de asentamiento real y la resolución real.
2) Para los dispositivos iOS, el ancho de configuración puede entrar en vigencia, pero para Android, el ancho de configuración no entrará en vigencia. La relación de escala de DPI se calcula automáticamente por el ancho que establece y la resolución real que establece. Sin embargo, en Android, el ancho establece no es válido. Lo que puede establecer es una Densidad de Target de campo especial, es decir, hay tres variables: ancho del navegador, ancho real del dispositivo y DPI. Simplemente usemos una fórmula para expresar la relación entre ellas (no las relaciones reales, solo úsela para una breve explicación) Ancho real del dispositivo * dpi = ancho del navegador, aquí las tres variables, el ancho real del dispositivo es un valor conocido que no podemos operar, y podemos establecer una de las otras variables para afectar las otras. En iOS, lo que podemos cambiar es el ancho del navegador, DPI se genera automáticamente, y en Android, lo que podemos cambiar es DPI, y el ancho del navegador se genera automáticamente. Para Android, no importa cómo establezcamos el ancho, no tendrá un impacto en el ancho del navegador.
PD: Aquí hablaré sobre otro problema extraño: en el G11 de HTC (solo tengo este para el teléfono de HTC y ninguna otra prueba), si DPI está configurado sin mostrar el ancho, el usuario-escalable = no no surge efecto, es decir ,: <meta name = viewport content = target-densityDPI = 300, scalable de usuario = no />, no puede evitar los usuarios de la pantalla en la pantalla. Necesitamos establecer el valor de ancho de manera visible. Aunque este valor no tiene ningún impacto en la resolución de la pantalla del navegador en Android (aún tendrá un impacto en iOS), aún necesitamos establecerlo, y este valor debe ser mayor que 320. Si es menor o igual a 320, escalable por el usuario = No no puede ser efectivo. Este problema solo aparece en el teléfono G11 de HTC, y no hay tal problema en el teléfono Aquos. Compatible con Android es realmente un dolor de cabeza @_ @. No sé cuántas dificultades habrá en el futuro. En WinPhone, el resultado es aún más extraño: establecí un valor superior a 480 para el ancho de la ventana gráfica, y el usuario escalable = no fallará. Si un valor inferior a 480, el usuario escalable = NO entrará en vigencia. Pero no importa cuánto valor establezca el ancho de la ventana gráfica, no tiene el efecto sobre el ancho real que se muestra por WinPhone, ni tiene el efecto a través de Target DISTIVEDPI. Establezca el ancho, si es inferior a 480, la pantalla se alejará, pero la escala de reducción es completamente diferente de lo que esperaba. No sé en qué regla se acerca. No sé si esto es un problema con WinPhone o un problema con la implementación de Dell.
3) Este artículo debe estar directamente relacionado con el artículo anterior: cuando el dispositivo iOS es horizontal y vertical, ajustará automáticamente el DPI. Ya sea horizontal o vertical, puede garantizar que el ancho del navegador sea igual al valor establecido en la ventana gráfica. Por lo tanto, cuando las pantallas horizontales y verticales son pantallas horizontales y verticales, el tamaño del contenido que se muestra en la página escalará y cambiará automáticamente. Cuando los teléfonos Android son pantallas horizontales y verticales, el DPI no se cambiará, y cuando las pantallas horizontales y verticales, la página web no se acercará. Por esta razón, iOS puede asegurarse de que no se genere una barra de desplazamiento en las páginas horizontales y verticales, y se muestra la pantalla completa, pero Android no puede garantizar esto. Si las pantallas horizontales y verticales no pueden estar llenas, y viceversa.
4) Para los dispositivos iOS, si se define la pantalla de ancho y la posición más ancha de la página excede el ancho, el ancho no es válido y aún se mostrará en el ancho más ancho (no habrá barra de desplazamiento). Pero un problema muy extraño ocurrirá en este momento. Después de cambiar la pantalla horizontal y vertical de su teléfono varias veces, encontrará que su página se ha ampliado automáticamente y aparece una barra de desplazamiento, pero de hecho, el ancho ampliado no tiene nada que ver con el ancho que establece. Para evitar que esto suceda, debe establecer el ancho del ancho para que sea más grande que la parte más ancha de la página, o lo mismo.