La pagina Bootstrap semplice non risponde su iPhone

StackOverflow https://stackoverflow.com/questions/9386429

Domanda

Ho scaricato l'esempio di Twitter Bootstrap e con esso ho creato un semplice progetto rails.Ho copiato il css dove necessario e viene visualizzato bene.Ho copiato anche 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 del design reattivo" con dimensioni diverse, funziona alla grande.

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

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

Cosa potrebbe andare storto?Non ho praticamente toccato alcun CSS, ho solo aggiunto un riempimento nel 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;
}
È stato utile?

Soluzione

Assicurati di aggiungere: 

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

al tuo <head>.

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

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

Altri suggerimenti

Il codice proposto da frntk non funziona quando si accende il dispositivo in visualizzazione orizzontale e la soluzione data da virtualeyes non è corretta perché utilizza punto e virgola al posto delle virgole.Ecco il codice corretto: 

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

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

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

Se utilizzi l'inoltro del dominio tramite il tuo provider DNS, il tuo sito potrebbe finire racchiuso in un iframe.GoDaddy, ad esempio, utilizza questa tecnica se stai mascherando il tuo dominio e eseguendo l'inoltro.

Sono rimasto bloccato su questo problema per diverse ore.

Non dimenticare di inserire il contenuto anche all'interno di un <div class="container-fluid">...</div>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top