La pagina Bootstrap semplice non risponde su iPhone

84

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 Bootstrap Hero Example (che è quella da cui sono partito), funziona benissimo sul mio iPhone.

Cosa potrebbe andare storto? Non ho praticamente toccato nessun CSS, ho solo aggiunto un riempimento sul piè di pagina.

Cordiali saluti, il CSS che ho cambiato è che sto collegando la mia app application.csscon 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;
}

twitter-bootstrap responsive-design

— RaySF
fonte

Puoi pubblicare una pagina di prova o del codice?

— Andres Ilich

È reattivo per me. Perché pensi che non sia reattivo?

— Jesse Wolgamott

@ RaySF non riesco a vedere la causa del motivo per cui non dovrebbe funzionare, anche se ho qualche scrupolo sulla @importregola che stai usando, ma è personale. Puoi pubblicare un caso di prova?

— Andres Ilich

@JesseWolgamott non è reattivo sul mio iphone, quando apro le due pagine sopra menzionate, gli esempi ufficiali funzionano bene (cioè il menu non viene visualizzato lo stesso per esempio) ma la mia pagina viene visualizzata proprio come su un desktop.

— RaySF

1

@RaySF A causa della natura del mio lavoro, ho dovuto cercare modi per aumentare la compatibilità e aumentare le prestazioni di fogli di stile molto grandi che sono stati impilati utilizzando il @importmetodo di notazione. Lungo la strada ho riscontrato molti problemi a causa di quella tecnica e ho scoperto che c'era un grande successo nelle prestazioni (e anche molti errori che non potevano essere spiegati) che sono stati successivamente risolti aggiungendo i fogli di stile utilizzando il <link>tag html . Dubbi che sono stati successivamente supportati da domande come questa qui in SO.

— Andres Ilich

185

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.

— Víctor López García
fonte

8

e questo, per far funzionare sia la visualizzazione verticale che quella orizzontale: <meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;" />

— virtualeyes

@virtualeyes, grazie per il suggerimento! qualche idea su come consentire il ridimensionamento dell'utente e far funzionare correttamente la vista del paesaggio?

— Andrei

No, uso JQuery mobile, non un grande sostenitore del design reattivo. Lascia che il cellulare sia mobile e che i tablet e oltre, il desktop. Qualunque cosa in mezzo, non importa ;-)

— virtualeyes

111

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 il 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

— Nicolas BADIA
fonte

4

Gli esempi nel sito ufficiale di Twitter Bootstrap dovrebbero essere aggiornati per utilizzarlo.

— wenbert

1

Ottimo avviso, grazie! Ha avuto un problema simile con la rotazione dello schermo, ora funziona come un fascino.

— Mark Vital

8

Questa dovrebbe essere la risposta accettata!

— Sheharyar

6

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.

— nullable
fonte

2

Ho passato ore a cercare di risolvere questo problema e alla fine mi sono imbattuto in questo commento. Grazie!

— Ed Shee,

Questo commento renderà molto molto felice un piccolo gruppo di persone.

— Nicolas Rojo

Non vedo un iframe avvolto intorno, ma avendo quel problema con i meta tag giusti, possono nascondere comunque l'iframe?

— helle

3

Sono rimasto bloccato su questo problema per diverse ore.

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

— dpigera
fonte