La semplice pagina Bootstrap non risponde sull’iPhone

Ho scaricato l’esempio di Bootstrap di Twitter e ho creato un semplice progetto di guide. Ho copiato il css dove necessario e viene visualizzato correttamente. Ho anche copiato il js e tutto funziona alla grande sul mio desktop: riorganizza la pagina quando cambio la dimensione del mio browser. Quando si utilizzano alcuni “strumenti di test di progettazione reattivi” con dimensioni diverse, funziona benissimo.

Il problema che ho è sul mio iPhone: viene visualizzato come sul mio desktop.

Quando provo la pagina di esempio di Bootstrap Hero (che è quella da cui sono partito), funziona perfettamente sul mio iPhone.

Cosa potrebbe andare storto? Non ho praticamente toccato alcun CSS, ho appena aggiunto una spaziatura sul piè di pagina.

Cordiali saluti, il CSS che ho cambiato è che sto collegando la mia app a application.css con il seguente contenuto:

 /* Application stylesheet */ @import url(bootstrap.css); @import url(bootstrap-responsive.css); /* Body */ body { padding-top: 60px; padding-bottom: 40px; } /* Footer */ footer { padding: 20px 0; } 

Assicurati di aggiungere:

  

al tuo .

Ho avuto un problema simile e ho erroneamente pensato che fosse solo una questione di larghezza della finestra.

Aggiornamento : controlla la risposta @NicolasBADIA per una versione più completa.

Il codice proposto da frntk non funziona quando si gira il dispositivo in visualizzazione orizzontale e la soluzione fornita da virtualeyes non è corretta perché utilizza il punto e virgola anziché le virgole. Ecco il codice corretto:

  

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

Concesso, un caso limite molto piccolo, ma degno di nota.

Se stai utilizzando l’inoltro del dominio tramite il tuo provider DNS, il tuo sito potrebbe finire avvolto in un iframe. Ad esempio, GoDaddy utilizza questa tecnica se stai mascherando il tuo dominio e l’inoltro.

Sono rimasto bloccato su questo problema per diverse ore.

Non dimenticare di posizionare il contenuto anche all’interno di

...

aggiungi il tuo head tag funziona fresco reattivo su qualsiasi dispositivo assicurati di aggiungere quello che è usato per tutta la larghezza con la regolazione retriggers