Los navegadores móviles generalmente representan páginas en una ventana virtual que es más ancha que la pantalla. Esta ventana virtual es la vista. El propósito es mostrar las páginas web que no están adaptadas a la terminal móvil normalmente, para que puedan mostrarse completamente a los usuarios. A veces, cuando usamos dispositivos móviles para acceder a la página web de escritorio, veremos una barra de desplazamiento horizontal, y el ancho del área de visualización aquí es el ancho de la ventana gráfica.
Regularmente, si la página se puede escalar, use el siguiente código
<Meta name = Viewport Content = Width = Device-Width, inicial a escala = 1 />
Si no desea acercarse, use el siguiente código
2. La diferencia entre píxeles y píxeles del dispositivo en CSS<Meta name = Viewport Content = Width = Device-Width, inicial a escala = 1.0, mínima a escala = 1.0, máxima escala = 1.0, escala de usuario = no>
Al desarrollar páginas web de escritorio, 1px en CSS es 1px en el dispositivo; Sin embargo, 1PX en CSS es solo un valor abstracto, que no representa los píxeles reales; Mientras que en los dispositivos móviles, la densidad de píxeles de diferentes dispositivos es diferente, y 1px en CSS puede no ser igual a un valor de píxel del dispositivo real. La escala de usuarios también cambiará cuántos píxeles de dispositivo 1px en CSS representan. Esta relación es DevicePixelratio
Píxeles físicos/píxeles independientes = DevicePixelratio
Podemos acercar el navegador e imprimir la ventana. Devicepixelratio en la consola para ver el tamaño de DevicePixelRatio. Los píxeles independientes en él pueden entenderse como PX en CSS.
3. Conceptos básicos de la visiónCódigo:
<meta name = viewport content = width = dispositivo-width, inicial a escala = 1, máxima escala = 1>
Las siguientes son varias propiedades de la ventana gráfica. Estas propiedades se pueden usar de manera mixta. Múltiples propiedades deben estar separadas por comas al mismo tiempo. Aquí expandimos un concepto llamado Viewport ideal, que se refiere a la ventana gráfica en circunstancias ideales. Puede ver todo el contenido de la página web normalmente sin escala de usuarios y barras de desplazamiento horizontal, y puede ver todo el texto claramente. No importa cuán pequeño se define este texto en CSS, se puede ver claramente cuando se muestra.
| propiedad | describir |
|---|---|
| ancho | Controla el ancho de la ventana gráfica, puede especificar un número; o establecer el ancho del dispositivo para especificar |
| altura | Controle la altura de la ventana gráfica. Esta propiedad no es muy importante y rara vez se usa. |
| escala inicial | Controle el nivel de zoom en idealViewport cuando la página se carga inicialmente, generalmente establecida en 1, que puede ser un decimal |
| a escala máxima | Permite que el valor de escala máximo del usuario sea un número y puede ser decimal |
| Mínimo | Permite que el valor de escala mínimo del usuario sea un número, que se puede tomar con decimales. |
| escalonado por el usuario | Si el usuario puede escalar, el valor no es o sí, no se permite no permitirse, sí, lo que permita |
1. ancho y escala inicial
Cuando se establecen el ancho y la escala inicial, el navegador seleccionará automáticamente el valor más grande para la adaptación. Activo:
<meta name = viewport content = width = 400, inicial a escala = 1>
El navegador seleccionará un gran valor para adaptarse. Si el ancho de la ventana ideal de la ventana actual es 300 y el valor a escala inicial es 1, el valor de ancho es 400 se obtiene; Si la vista ideal de la ventana actual es 480, se selecciona 480.
De hecho, Width = dispositivo-ancho y escala inicial = 1 representan la aplicación de la ventana gráfica ideal, pero en dispositivos móviles como iPad y iPhone e IE, las pantallas horizontales y verticales no se distinguen, y el ancho de la pantalla vertical se toma de manera predeterminada. La mejor manera de escribir compatibilidad es
<meta name = viewport content = width = dispositivo-width, inicial-escala = 1>
2. Dinámicamente cambiar los atributos
a. document.write ()
document.write ('<meta name = viewport content = width = dispositivo-width, inicial-escala = 1>')
B.SetTribute
concepto de ventana de ventas altovar mvp = document.getElementById ('testViewPort');
MVP.SetAttribute ('Content', 'Width = 480');
Los navegadores móviles generalmente representan páginas en una ventana virtual que es más ancha que la pantalla. Esta ventana virtual es la vista. El propósito es mostrar las páginas web que no están adaptadas a la terminal móvil normalmente, para que puedan mostrarse completamente a los usuarios. A veces, cuando usamos dispositivos móviles para acceder a la página web de escritorio, veremos una barra de desplazamiento horizontal, y el ancho del área de visualización aquí es el ancho de la ventana gráfica.
Diferencia entre píxeles y píxeles del dispositivo en CSSAl desarrollar páginas web de escritorio, 1px en CSS es 1px en el dispositivo; Sin embargo, 1PX en CSS es solo un valor abstracto, que no representa los píxeles reales; Mientras que en los dispositivos móviles, la densidad de píxeles de diferentes dispositivos es diferente, y 1px en CSS puede no ser igual a un valor de píxel del dispositivo real. La escala de usuarios también cambiará cuántos píxeles de dispositivo 1px en CSS representan. Esta relación es DevicePixelratio
Píxeles físicos/píxeles independientes = DevicePixelratio
Podemos acercar el navegador e imprimir la ventana. Devicepixelratio en la consola para ver el tamaño de DevicePixelRatio. Los píxeles independientes en él pueden entenderse como PX en CSS.
Conceptos básicosUn sitio típico optimizado móvil contiene contenido similar al siguiente:
<meta name = viewport content = width = dispositivo-width, inicial a escala = 1, máxima escala = 1>
Las siguientes son varias propiedades de la ventana gráfica. Estas propiedades se pueden usar de manera mixta. Múltiples propiedades deben estar separadas por comas al mismo tiempo. Aquí expandimos un concepto llamado Viewport ideal, que se refiere a la ventana gráfica en circunstancias ideales. Puede ver todo el contenido de la página web normalmente sin escala de usuarios y barras de desplazamiento horizontal, y puede ver todo el texto claramente. No importa cuán pequeño se define este texto en CSS, se puede ver claramente cuando se muestra.
| propiedad | describir |
|---|---|
| ancho | Controla el ancho de la ventana gráfica, puede especificar un número; o establecer el ancho del dispositivo para especificar |
| altura | Controle la altura de la ventana gráfica. Esta propiedad no es muy importante y rara vez se usa. |
| escala inicial | Controle el nivel de zoom en idealViewport cuando la página se carga inicialmente, generalmente establecida en 1, que puede ser un decimal |
| a escala máxima | Permite que el valor de escala máximo del usuario sea un número y puede ser decimal |
| Mínimo | Permite que el valor de escala mínimo del usuario sea un número, que se puede tomar con decimales. |
| escalonado por el usuario | Si el usuario puede escalar, el valor no es o sí, no se permite no permitirse, sí, lo que permita |
1. ancho y escala inicial
Cuando se establecen el ancho y la escala inicial, el navegador seleccionará automáticamente el valor más grande para la adaptación. Activo:
<meta name = viewport content = width = 400, inicial a escala = 1>
El navegador seleccionará un gran valor para adaptarse. Si el ancho de la ventana ideal de la ventana actual es 300 y el valor a escala inicial es 1, el valor de ancho es 400 se obtiene; Si la vista ideal de la ventana actual es 480, se selecciona 480.
De hecho, Width = dispositivo-ancho y escala inicial = 1 representan la aplicación de la ventana gráfica ideal, pero en dispositivos móviles como iPad y iPhone e IE, las pantallas horizontales y verticales no se distinguen, y el ancho de la pantalla vertical se toma de manera predeterminada. La mejor manera de escribir compatibilidad es
<meta name = viewport content = width = dispositivo-width, inicial-escala = 1>
2. Dinámicamente cambiar los atributos
a. document.write ()
document.write ('<meta name = viewport content = width = dispositivo-width, inicial-escala = 1>')
B.SetTribute
var mvp = document.getElementById ('testViewPort');
MVP.SetAttribute ('Content', 'Width = 480');
De acuerdo, este artículo le ha sido presentado. Puede elegir de acuerdo con sus propias necesidades de prueba. En términos generales, la PC y los teléfonos móviles se pueden usar sin adaptabilidad y no admiten la escala. Si salta al teléfono móvil, puede escalar sin ningún impacto.