Perché i browser mobili caricano la mia pagina completamente ingrandita?

Question

Attualmente sto lavorando a un sito per un cliente (ancora in corso di lavorazione) e sto cercando di risolvere alcuni dei problemi relativi al cellulare sul sito.

Il problema principale che sto avendo è che i browser mobili (Android + iphone) caricano il sito completamente ingrandito nella parte in alto a sinistra del sito. Mi piacerebbe che fosse ingrandito per adattarsi all'intera larghezza del sito nel viewport, indipendentemente dalla larghezza del viewport.

Il sito può essere vista qui: http://www.graceprep.com

C'è una soluzione semplice per questo? Ho esperienza con HTML/CSS ma sono un po 'newbie quando si tratta di browser per dispositivi mobili.

Ecco alcuni HTML nel mio file header.php che potrebbero essere rilevanti. Ho provato a cambiare la proprietà width inutilmente. La proprietà di scala iniziale è efficace, ma troppo ampia: mi piacerebbe che il sito fosse completamente ingrandito per tutti i browser mobili, indipendentemente dall'orientamento o dalle dimensioni dello schermo.

C'è un modo per fare questo?

Answer 1

Perché hai quel metatag? Se lo rimuovi completamente, il dispositivo deciderà automaticamente sul livello di zoom.

Answer 2

Sono quasi positivo che

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

dovrebbe risolvere questo problema. Puoi impostare "width" su qualsiasi valore tu voglia, ma settinandolo alla larghezza del dispositivo si adatterà al valore della larghezza del pixel di qualsiasi dispositivo. "scala iniziale" controlla il livello di zoom alla larghezza specificata.

Answer 3

Sembra che la maggior parte dei browser mobili tenda a comunicare una larghezza di finestra predefinita che è considerevolmente più larga della larghezza del cellulare. Ad esempio, iOS Safari presuppone che una pagina Web sia larga 980 pixel e ingrandisca per adattarsi all'intero lotto all'interno dell'iPhone 4 320px disponibile (https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972). I browser Android tendono ad adattarsi per una larghezza compresa tra 800 e 1024 pixel CSS().

La larghezza prevista sembra essere in qualche modo comunicato prima il meta tag viene implementato, e quindi in alcune situazioni di impostazione della larghezza alla larghezza del dispositivo poi sembra di essere trattati come lo zoom in. A meno che il CSS sui vostri usi pagina media query per adattarsi alla larghezza effettiva del dispositivo, è meglio a mio avviso evitare di perdere la parte 'width = device-width' del valore e semplicemente impostare gli altri vincoli che stai cercando.