HTML5 Boilerplate: Meta viewport e width = device-width
Estou construindo um site adaptativo / responsivo.
Em relação a esta mudança recente no HTML5BP:
"revisões css para celular / iOS"
Eu comecei a usar:
<meta name="viewport" content="width=device-width">
... e eu tenho isso no meu CSS:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Quandoinitial-scale=1
foi incluído, girando de vertical para horizontal (no iPad / iPhone) fez com que o layout mudasse de 2 colunas (por exemplo) para 3 colunas (devido a consultas meida,initial-scale=1
eCorreção de JS para erro de escala da viewport).
Para resumir, quando no modo paisagem, isso amplia a página:
<meta name="viewport" content="width=device-width">
... e isso não acontece:
<meta name="viewport" content="width=device-width, initial-scale=1">
Nota: Você pode ver esse efeito de zoom em ação ao visualizarWeb site HTML5BP em um iPad / iPhone.
Minhas perguntas:
Isso está se tornando o novo padrão (ou seja, zoom quando no modo paisagem)?Eu estou tendo um monte de tempo explicando essa mudança para meus colegas de trabalho e chefes ... Eles estão acostumados a ver um layout diferente no modo horizontal; agora que a página aproxima e o layout permanece o mesmo (exceto que é maior). Alguma dica de como explicar isso para as massas ignorantes (das quais eu posso estar incluído)?@ robertc: Obrigado! Isso é muito útil.
Eu realmente gostonão tendo oinitial-scale=1
; são meus colegas de trabalho que estão acostumados a ver a mudança de layout em vez de ampliar. Tenho certeza que estareiforçado adicionarinitial-scale=1
só para agradar a todos (porquenão zoom, e ver a mudança de layout, é o que eles estão acostumados a ver).
Eu só notei o HTML5BPindex.html no githubeo site, estava usando<meta name="viewport" content="width=device-width">
; para mim, isso é bom o suficiente para desistirinitial-scale=1
, mas eu fico com as sobrancelhas levantadas quando tento explicaressas coisas para os "não-geeks". : D