HTML5 Boilerplate: Meta viewport y width = device-width
Estoy construyendo un sitio web adaptable / receptivo.
Respecto a este reciente cambio a la HTML5BP:
"revisiones de css para dispositivos móviles / iOS"
He empezado 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%;
}
Cuandoinitial-scale=1
se incluyó, la rotación de vertical a horizontal (en iPad / iPhone) hizo que el diseño cambiara de 2 columnas (por ejemplo) a 3 columnas (debido a las consultas de Meida,initial-scale=1
yCorrección de JS para error de escala de vista).
Para resumir, cuando está en modo horizontal, esto amplía la página:
<meta name="viewport" content="width=device-width">
... y esto no lo hace
<meta name="viewport" content="width=device-width, initial-scale=1">
Nota: Puede ver este efecto de zoom en acción al ver elSitio web HTML5BP en un iPad / iPhone.
Mis preguntas:
¿Se está convirtiendo esto en el nuevo estándar (es decir, zoom cuando está en modo horizontal)?Estoy teniendo un gran tiempo explicando 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.
En realidad me gustano teniendo elinitial-scale=1
; Son mis compañeros de trabajo quienes están acostumbrados a ver el cambio de diseño en lugar del zoom. Estoy seguro que estareforzado para agregarinitial-scale=1
sólo para complacer a todos (porqueno zoom, y ver el cambio de diseño, es lo que están acostumbrados a ver).
Acabo de notar el HTML5BPindex.html en githubyel sitio web, estaba usando<meta name="viewport" content="width=device-width">
; Para mí, eso es razón suficiente para abandonar.initial-scale=1
, pero me levanto las cejas cuando trato de explicarestas cosas a los "no geeks". :RE