Frage Die einfache Bootstrap-Seite reagiert nicht auf das iPhone


Ich habe Twitter Bootstrap Beispiel heruntergeladen und ein einfaches Rails-Projekt damit erstellt. Ich kopierte die CSS wo nötig und es zeigt gut. Ich kopierte auch die js und alles funktioniert gut auf meinem Desktop: Es reorganisiert die Seite, wenn ich die Größe meines Browsers ändere. Wenn Sie einige "Responsive Design Testing Tools" mit verschiedenen Größen verwenden, funktioniert es großartig.

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

Wenn ich die Bootstrap Hero Beispielseite (von der ich angefangen habe) ausprobiere, funktioniert sie auf meinem iPhone großartig.

Was könnte schiefgehen? Ich habe so ziemlich nichts mit CSS zu tun, ich habe nur eine Füllung in der Fußzeile hinzugefügt.

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

/* Application stylesheet */

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

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

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

74
2018-02-21 22:37


Ursprung


Antworten:


Stellen Sie sicher, dass Sie Folgendes hinzufügen:

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

zu deinem <head>.

Ich hatte ein ähnliches Problem, und ich dachte irrtümlich, es sei nur eine Frage der Breite des Darstellungsbereichs.

Aktualisieren: Check-out @NicolasBADIA Antwort für eine vollständigere Version.


165
2018-02-23 04:37



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

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

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


103
2018-04-12 09:23



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

Wenn Sie die Domänenweiterleitung über Ihren DNS-Provider verwenden, wird Ihre Website möglicherweise in einen Iframe eingebettet. GoDaddy zum Beispiel verwendet diese Technik, wenn Sie Ihre Domain maskieren und weiterleiten.


6
2017-07-16 00:04



Ich steckte mehrere Stunden lang an diesem Problem fest.

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


2
2018-01-03 23:34



füge dein Kopf-Tag hinzu es funktioniert cool reaktionsfähig auf jedem Gerät stellen Sie sicher, dass hinzufügen, die verwendet wird, um die volle Breite mit anpassen reagieren


-3
2018-06-01 12:14