HTML5 Boilerplate: Meta viewport i width = szerokość urządzenia
Buduję stronę adaptacyjną / responsywną.
Odnośnie tej ostatniej zmiany do HTML5BP:
"wersje css dla urządzeń mobilnych / iOS"
Zacząłem używać:
<meta name="viewport" content="width=device-width">
... i mam to w moim CSS:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Gdyinitial-scale=1
został włączony, obrót z pionu na poziom (na iPadzie / iPhonie) spowodował zmianę układu z 2 kolumn (na przykład) na 3 kolumny (z powodu zapytań meida,initial-scale=1
iPoprawka JS dla błędu skali rzutni).
Podsumowując, w trybie poziomym, powiększa stronę:
<meta name="viewport" content="width=device-width">
... a to nie:
<meta name="viewport" content="width=device-width, initial-scale=1">
Uwaga: Ten efekt powiększenia można zobaczyć w akcji podczas przeglądaniaStrona HTML5BP na iPadzie / iPhonie.
Moje pytania:
Czy to staje się nowym standardem (tj. Zoomem w trybie poziomym)?Mam dość czasu, aby wyjaśnić tę zmianę moim współpracownikom i szefom ... Przyzwyczaili się widzieć inny układ w trybie poziomym; teraz, gdy strona się powiększa, a układ pozostaje taki sam (z wyjątkiem tego, że jest większy). Jakieś wskazówki, jak to wytłumaczyć ignoranckim masom (których, być może, włączę)?@robertc: Dzięki! To bardzo pomocne.
Naprawdę lubięnie miećinitial-scale=1
; to moi współpracownicy przyzwyczajeni są do zmiany układu, a nie powiększania. Jestem pewien, że będęwymuszony dodaćinitial-scale=1
po prostu zadowolić wszystkich (bonie powiększanie i oglądanie zmiany układu jest tym, do czego są przyzwyczajeni).
Właśnie zauważyłem HTML5BPindex.html na github, iStrona internetowa, używał<meta name="viewport" content="width=device-width">
; dla mnie to wystarczający powód, żeby porzucićinitial-scale=1
, ale budzę brwi, kiedy próbuję to wyjaśnićte rzeczy do „nie-maniaków”. :RE