html5 - name - viewport definicion
Boilerplate HTML5: meta viewport y ancho=ancho del dispositivo (5)
¿Has intentado esto?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Estoy construyendo un sitio web adaptativo / receptivo.
Con respecto a este cambio reciente en HTML5BP:
" revisiones css para dispositivos móviles / iOS "
Empecé a usar:
<meta name="viewport" content="width=device-width">
... y tengo esto en mi CSS:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Cuando se incluyó la initial-scale=1 , al girar de vertical a horizontal (en iPad / iPhone), el diseño cambió de 2 columnas (por ejemplo) a 3 columnas (debido a consultas de meida, initial-scale=1 y corrección de JS para error de escala de ventana gráfica ).
Para resumir , cuando está en modo horizontal, esto acerca la página:
<meta name="viewport" content="width=device-width">
... y esto no:
<meta name="viewport" content="width=device-width, initial-scale=1">
Nota: Puede ver este efecto de zoom en acción cuando visualiza el sitio web HTML5BP en un iPad / iPhone.
Mis preguntas:
- ¿Se está convirtiendo en el nuevo estándar (es decir, zoom cuando está en modo paisaje)?
- Me está costando mucho explicar este cambio a mis compañeros de trabajo y jefes ... Están acostumbrados a ver un diseño diferente en modo horizontal; ahora que la página se acerca y el diseño permanece igual (excepto que es más grande). ¿Algún consejo sobre cómo explicar esto a las masas ignorantes (de las cuales, podría estar incluido)?
@robertc: ¡Gracias! Eso es muy útil.
De hecho, me gusta no tener la initial-scale=1 ; son mis compañeros de trabajo quienes están acostumbrados a ver el cambio de diseño en lugar de hacer zoom. Estoy seguro de que me veré obligado a agregar initial-scale=1 solo para complacer a todos (porque no hacer zoom, y ver el cambio de diseño, es lo que están acostumbrados a ver).
Me di cuenta de HTML5BP index.html en github , y el sitio web , estaba usando <meta name="viewport" content="width=device-width"> ; para mí, esa es razón suficiente para abandonar initial-scale=1 , pero me sorprende cuando trato de explicarles estas cosas a los "no geeks". :RE
Apple [algo] claramente describe el comportamiento de las ventanas here .
Principalmente, el ancho del dispositivo y la altura del dispositivo en dispositivos iOS se refieren a las dimensiones de la pantalla en modo vertical. Si configura el ancho de la ventana gráfica para el ancho del dispositivo, es lo mismo que establecerlo en un valor constante . Por lo tanto, cuando el ancho físico de la pantalla cambia con un cambio de aspecto, el navegador extiende el tamaño constante que ingresó al ancho de la pantalla en modo horizontal. Este comportamiento no es incorrecto ni correcto, simplemente lo es.
Apple sugiere width=device-width para aplicaciones adaptadas a la plataforma, por lo que es sin duda la forma "de Apple" de hacerlo:
Si está diseñando una aplicación web específicamente para iOS, entonces el tamaño recomendado para sus páginas web es el tamaño del área visible en iOS. Apple recomienda que establezca el ancho del ancho del dispositivo para que la escala sea 1.0 en orientación vertical y la ventana gráfica no cambie de tamaño cuando el usuario cambie a orientación horizontal. [es decir. La ventana gráfica conserva el ancho del dispositivo vertical, pero se escala o estira para que la presentación se ajuste al ancho del paisaje.
Personalmente, prefiero la escala inicial = 1.0 sin un enfoque de configuración de ancho de dispositivo absoluto, ya que hace que la ventana siempre llene la pantalla del dispositivo sin estirar. Apple también considera este marcado válido:
La Figura 3-14 muestra la misma página web cuando la escala inicial se establece en 1.0 en iPhone. Safari en iOS infiere el ancho y la altura para adaptarse a la página web en el área visible. El ancho de la ventana gráfica se establece en ancho del dispositivo en orientación vertical y altura del dispositivo en orientación horizontal.
Encontré que la explicación de la ventana gráfica de Mozilla es la más detallada y útil. Aquí hay un extracto:
La propiedad de ancho controla el tamaño de la ventana gráfica. Se puede establecer en un número específico de píxeles, como
width=600o en el valor especial de ancho del dispositivo, que es el ancho de la pantalla en píxeles CSS a una escala del 100%. (Hay valores deheightyheightdevice-heightcorrespondientes, que pueden ser útiles para páginas con elementos que cambian de tamaño o posición en función de la altura de la ventana gráfica).La propiedad de
initial-scalecontrola el nivel de zoom cuando se carga la página por primera vez. Las propiedades demaximum-scaleminimum-scaleyuser-scalablecontrolan cómo los usuarios pueden acercar o alejar la página
No es un nuevo estándar, es cómo siempre funcionó AFAIK. Si establece el ancho en un número fijo de píxeles, al girar de vertical a horizontal solo cambia la escala, ya que el número de píxeles virtuales permanece constante. Supongo que agregar initial-scale=1 está bloqueando la escala a medida que cambia de uno a otro, es decir, el factor de escala de su página no cambia a medida que se gira el dispositivo. ¿Cómo se ve la página si la carga inicialmente en horizontal en lugar de vertical?
Sugeriría que si quiere el comportamiento que obtiene cuando especifica initial-scale=1 , especifique initial-scale=1 . HTML5 BoilerPlate es algo que se supone que debe modificar para satisfacer sus propios requisitos.
Para agregar una pequeña actualización: Esto todavía está en forma de borrador, pero definitivamente es algo a investigar. También tiene una versión prefijada para el soporte de IE 10. Al usar CSS en lugar de HTML, borra gran parte de la confusión en la que está hablando al aplicar la initial-scale:1; para zoom:1; y dando opciones min / max . para width , height y zoom que aumenta el rango de ajuste en caso de ser necesario.
extend-to-zoom al rescate! ( http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo )
<meta name="viewport" content="initial-scale=1.0"> traduce en ...
@viewport{
zoom: 1.0;
width: extend-to-zoom;
}
@-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
donde como <meta name="viewport" content="width:device-width,initial-scale=1.0"> traduce en ...
@viewport{
zoom: 1.0;
width: device-width; /* = 100vw */
}
@-ms-viewport{
width: device-width;
zoom: 1.0;
}
Nota: width:extend-to-zoom 100%; es igual al width:device-width;