Confuso su "initial-scale = 1.0" - iphone 3GS vs 4

Question

Sto riscontrando dei problemi nel dimensionare correttamente il mio sito Web per i dispositivi mobili.

Abbiamo un sito progettato per essere una larghezza minima di 640 px, massimo di qualsiasi cosa. Ho il meta tag attualmente:

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" /> 

Ora - La parte Sono confuso circa è che se uso "iniziale scala = 1,0", ovviamente il sito sarà in scala 1: 1, e avrà un aspetto scadente su un iPhone 3G (vedrai solo metà del sito). Ora, su un Iphone 4 (con una risoluzione wide 640px) verrà ridimensionato correttamente a 640px se utilizzo "initial-scale = 1.0".

In alternativa, se la grafica è 480px, i 3G richiederebbero scala = .667 e iOS 4 richiederebbe 1,3, corretto?

Quindi, come si adatta il sito perfettamente da bordo a bordo? Il browser può rilevare la larghezza del dispositivo e quindi impostare la scala di conseguenza? Ci sono un sacco di diverse larghezze di dispositivi là fuori ... Android, iPhone più anziani, di mora ecc

diventando abbastanza frusterated :(sento come se mi manca qualcosa di importante che dovrei già sapere.

Modifica Sembra che il meta tag "scala iniziale" debba essere ridimensionato rispetto alla viewport, quindi utilizzare width = device-width per impostare la dimensione effettiva della viewport

Il problema che mi sembra di avere è che il viewport non è in scala per adattarsi al dispositivo, rimane a 640 px indipendentemente dal tag che uso. Cosa mi manca qui ???

Answer 1

Ok, ho calcolato fuori ... in sostanza.

Poiché il mio disegno è in realtà 2x la dimensione del viewport (sorta di), la chiave è solo per utilizzare "scala iniziale = 0,5". Funziona correttamente su entrambi i dispositivi (3G e 4), e più o meno correttamente su dispositivi Android, ecc.

Un po 'complicato, e sembra che ci dovrebbe essere un modo migliore per farlo, ma per il momento , Funziona.

Grazie a tutti coloro che hanno fornito input.

Answer 2

Credo che la risposta sia che si vuole dire al browser Web di ridimensionare sempre il sito a 640 pixel. Oserei anche disattivare la possibilità per gli utenti di ridimensionare il sito in modo che le drags sparse non ridimensionino tutto.

Prova questo:

<meta name="viewport" content="width=640; user-scalable=no;" /> 

Answer 3

"larghezza" indica al browser l'ampiezza del sito Web con lo zoom al 100%. se hai progettato il tuo sito web in modo fluido, puoi specificare "larghezza dispositivo" qui e il browser non dovrà utilizzare alcuno zoom, in quanto il tuo layout è progettato per adattarsi a qualsiasi larghezza di finestra.

"scala iniziale" serve per ignorare il comportamento predefinito di alcuni dispositivi per ingrandire o ridurre il sito Web in modo che la larghezza del sito Web (specificata sopra) corrisponda alla larghezza dello schermo. impostando questo su 1 in pratica si dice "non eseguire lo zoom per questo, utilizzare le barre di scorrimento se il mio sito web è troppo ampio per lo schermo e lasciare uno spazio vuoto ai lati se è troppo stretto". se vuoi che il tuo sito web riempia esattamente la larghezza dello schermo, non utilizzare la scala iniziale.

Answer 4

Penso che il problema principale con il messaggio originale sia che i punti e virgola non sembrano funzionare su iPhone 4+.Funziona solo con le virgole come separatori (o solo l'impostazione della larghezza del dispositivo). Altri browser sembrano essere più tolleranti.

Il seguente funziona in modo affidabile per me:

<meta name="viewport" 
     content="width=device-width,initial-scale=1,maximum-scale=1" /> 

dovrete anche per disabilitare il corpo e documento da scorrimento orizzontale:

body, html 
{  
    overflow-x: hidden;   
} 

Buon link per maggiori informazioni su Mozilla sito:

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag