Die einfache Bootstrap-Seite reagiert auf dem iPhone nicht

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

Frage

Ich habe das Twitter Bootstrap-Beispiel heruntergeladen und damit ein einfaches Rails-Projekt erstellt.Ich habe das CSS bei Bedarf kopiert und es wird gut angezeigt.Ich habe auch das js kopiert und alles funktioniert hervorragend auf meinem Desktop: Es organisiert die Seite neu, wenn ich die Größe meines Browsers ändere.Wenn Sie einige "Responsive Design Testing Tools" mit unterschiedlichen Größen verwenden, funktioniert dies hervorragend.

Das Problem, das ich habe, ist auf meinem iPhone: Es zeigt Juste wie auf meinem Desktop an.

Wenn ich die Bootstrap Hero-Beispielseite (von der ich aus gestartet bin) ausprobiere, funktioniert sie auf meinem iPhone hervorragend.

Was könnte schief gehen?Ich habe so gut wie kein CSS berührt, ich habe nur eine Auffüllung in der Fußzeile hinzugefügt.

Zu Ihrer Information, das CSS, das ich geändert habe, ist, dass ich meine App mit application.css mit folgendem Inhalt verknüpfe: 

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}

War es hilfreich?

Lösung

Stellen Sie sicher, dass Sie Folgendes hinzufügen: 

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

zu Ihrem <head>.

Ich hatte ein ähnliches Problem und dachte fälschlicherweise, es sei nur eine Frage der Breite des Ansichtsfensters.

Update : Eine vollständigere Version finden Sie in der Antwort von @NicolasBADIA.

Andere Tipps

Der von frntk vorgeschlagene Code funktioniert nicht, wenn Sie das Gerät in der Querformatansicht drehen, und die von virtualeyes angegebene Lösung ist falsch, da anstelle von Kommas Semikolon verwendet wird.Hier ist der richtige Code: 

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

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

Zugegeben, ein sehr kleiner Randfall, aber erwähnenswert.

Wenn Sie die Domainweiterleitung über Ihren DNS-Anbieter verwenden, wird Ihre Site möglicherweise in einen Iframe eingeschlossen.GoDaddy verwendet diese Technik beispielsweise, wenn Sie Ihre Domain maskieren und weiterleiten.

Ich war mehrere Stunden mit diesem Problem beschäftigt.

Vergessen Sie nicht, den Inhalt auch in einem <div class="container-fluid">...</div> zu platzieren

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top