Die einfache Bootstrap-Seite reagiert auf dem iPhone nicht

82

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 angefangen habe) ausprobiere, funktioniert sie auf meinem iPhone hervorragend.

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

Zu Ihrer Information, das CSS, das ich geändert habe, ist, dass ich meine App application.cssmit 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;
}
twitter-bootstrap responsive-design RaySF
quelle
Können Sie eine Testseite oder einen Code veröffentlichen?
Andres Ilich
Es reagiert auf mich. Warum denkst du, reagiert es nicht?
Jesse Wolgamott
@ RaySF Ich kann die Ursache nicht erkennen, warum es nicht funktionieren sollte, obwohl ich einige Bedenken bezüglich der @importRegel habe, die Sie verwenden, aber das ist persönlich. Können Sie einen Testfall posten?
Andres Ilich
@JesseWolgamott es reagiert nicht auf meinem iPhone, wenn ich die beiden oben genannten Seiten öffne, funktionieren die offiziellen Beispiele einwandfrei (dh das Menü wird zum Beispiel nicht gleich angezeigt), aber meine Seite wird wie auf einem Desktop angezeigt.
RaySF
1
@RaySF Aufgrund der Art meines Jobs musste ich nach Wegen suchen, um die Kompatibilität zu erhöhen und die Leistung sehr großer Stylesheets zu steigern, die mit der @importNotationsmethode gestapelt wurden . Unterwegs stellte ich fest, dass aufgrund dieser Technik viele Probleme aufgetreten waren und dass es einen großen Leistungseinbruch gab (und auch viele Fehler, die nicht erklärt werden konnten), die später durch Anhängen der Stylesheets mithilfe des HTML- <link>Tags behoben wurden . Zweifel, die später durch Fragen wie diese hier in SO gestützt wurden .
Andres Ilich

Antworten:

182

Stellen Sie sicher, dass Sie hinzufügen:

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

zu deinem <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.

Víctor López García
quelle
8
und dies, damit sowohl Hoch- als auch Querformat funktionieren: <meta name = "viewport" content = "width = Gerätebreite; Anfangsskala = 1,0; Maximalskala = 1,0; Benutzerskalierbarkeit = 0;" />
virtualeyes
@virtualeyes, danke für den Tipp! Haben Sie eine Idee, wie Sie die Skalierung von Benutzern ermöglichen und die Lanscape-Ansicht ordnungsgemäß funktionieren lassen können?
Andrei
Nein, ich verwende JQuery Mobile und glaube nicht an Responsive Design. Lassen Sie das Handy mobil sein und Tablets und höher, Desktop. Alles dazwischen, egal ;-)
virtualeyes
111

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 Semikolon anstelle von Kommas 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

Nicolas BADIA
quelle
4
Die Beispiele auf der offiziellen Twitter Bootstrap-Website sollten aktualisiert werden, um dies zu verwenden.
Wenbert
1
Toller Hinweis, danke! Hatte ein ähnliches Problem mit dem Drehen des Bildschirms, funktioniert jetzt wie ein Zauber.
Mark Vital
8
Dies sollte die akzeptierte Antwort sein!
Sheharyar
6

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.

nullable
quelle
2
Ich habe stundenlang versucht, dieses Problem zu lösen, und bin schließlich auf diesen Kommentar gestoßen. Danke dir!
Ed Shee
Dieser Kommentar wird eine winzige Gruppe von Menschen sehr, sehr glücklich machen.
Nicolas Rojo
Ich sehe keinen Iframe, aber wenn sie dieses Problem mit den richtigen Meta-Tags haben, können sie den Iframe trotzdem ausblenden?
Helle
2

Ich war mehrere Stunden mit diesem Problem beschäftigt.

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

dpigera
quelle