Die reaktionsschnelle Website wurde auf Mobilgeräten auf die volle Breite verkleinert

139

Ich teste die Navigationsleiste für die Bootstrap-Reaktionsfähigkeit und habe eine Demo- Website. Wenn ich die Größe des Browsers auf einem Desktop verändere, funktioniert alles einwandfrei, einschließlich der Navigationsleiste, die zum zusammenklappbaren Menü mit einem kleinen Symbol oben wird, auf das ich klicken kann, um weitere Menüschaltflächen anzuzeigen.

Aber als ich es mit einem mobilen Browser ausprobierte (ich versuchte es mit Chrome und mit einem Internetbrowser mit Android), sah ich das reaktionsschnelle Design nicht. Ich konnte nur eine sehr kleine Version einer Desktop-ähnlichen Website sehen.

Könnte jemand darauf hinweisen, was ich falsch mache?

twitter-bootstrap user-interface twitter-bootstrap-3 responsive-design bootstrap-4 lawphotog
quelle

Antworten:

378

Fügen Sie dies Ihrem HTML-Kopf hinzu.

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

Dies teilt kleineren Gerätebrowsern mit, wie die Seite skaliert werden soll. Weitere Informationen hierzu finden Sie hier: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Zim
quelle
1
Ich habe diesen Code im Kopfbereich hinzugefügt, aber er funktioniert nicht für meinen Standard-Internet-Explorer von Android, den Sie überprüfen können - www.freerechargeapp.com/index.html
Santosh
Ich verstehe wirklich nicht, warum für mich nicht funktioniert. Auf einer Website funktioniert und auf einer anderen Website nicht. Und die
Codestruktur
1
@Skelly - Andere Antworten, die ich ausgelassen maximum-scaleund 1.0stattdessen verwendet habe 1. Wissen Sie, ob diese Dinge einen Unterschied machen?
Onebree
1
Du hast mich gerettet :) Danke.
Fatih
1
Vielen Dank zwei Jahre später ist Ihr Beitrag immer noch das Shiznizzle (sic.) Walt
Walt
17

wie hier vorgeschlagen http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

<meta name="viewport" content="initial-scale=1">

Dies wäre eine noch bessere Wahl, da der Übergang von Hochformat zu Querformat und zurück eine viel angenehmere Benutzererfahrung darstellt, als dies mit / height aufgrund der möglichen automatischen Skalierung natürlich der Fall wäre.

Tom
quelle
Dank dessen wurde das Skalierungsproblem auf dem iPhone behoben und Hoch- und Querformat werden unterschiedlich (und korrekt) angezeigt.
SexxLuthor
0

Hinzufügen für Personen, die diesen Fehler suchen und für die die akzeptierte Antwort nicht funktioniert. Ich glaube, dass dies ein seltener, aber dennoch frustrierender Fall sein wird:

Wenn Ihre Seite in einem Frameset gerendert wird (z. B. Domain Cloaking), hilft es nicht, die Meta-Tags zu platzieren. Sie müssten sie in die Seite der Tarndomäne einfügen, auf die Sie je nach DNS-Host möglicherweise Zugriff haben oder nicht.

Tag Davis Waterbury
quelle
0

Leeren Sie den Cache Ihres Browsers und öffnen Sie die Seite in einem neuen Tab. Dies löst manchmal das Problem für mich, wenn es passiert.

John Q.
quelle