Responsive Webdesign funktioniert auf dem Desktop, jedoch nicht auf Mobilgeräten

117

Ich habe eine Website, die auf Mobiltelefone reagieren muss. Ich habe es mit meinem Desktop erstellt. Wenn ich Browserfenster anpasse, funktioniert es perfekt für Mobiltelefone, aber wenn ich es auf meinem echten Mobiltelefon überprüfe: Samsung Galaxy S2 reagiert es nicht auf die mobile Ansicht.

Was könnte falsch sein?

Tadas Davidsonas
quelle
1
Sie müssen weitere Informationen und Code hinzufügen, damit jeder hilfreich ist. Ihr CSS, HTML usw. Welches Framework (wie z. B. Twitter Bootstrap) verwenden Sie gegebenenfalls usw.
ajacian81

Antworten:

306

Wahrscheinlich fehlt Ihnen das Meta-Tag des Ansichtsfensters im HTML-Kopf:

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

Ohne sie übernimmt das Gerät das Ansichtsfenster und setzt es auf volle Größe.

Mehr Infos hier .

Agush
quelle
2
Es kann im Browser ohne diese Leitung funktionieren, aber auf Mobilgeräten benötigt es nur diese Leitung.
Tadas Davidsonas
3
Ich liebe dich einfach
Dimitris Filippou
Ich liebe dich auch @ ΔημήτρηςΦιλίππου
Agush
Noch ein Wort der Liebe zu dir
BTLM
3
index.htmlindex.html
Stellen Sie
6

Ich habe mich auch diesem Problem gestellt. Endlich habe ich eine Lösung. Verwenden Sie diesen folgenden Code. Hoffnung: Problem wird gelöst.

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

Saiful Islam
quelle
2

Obwohl es oben beantwortet wurde und es richtig ist zu verwenden

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

Wenn Sie jedoch React und Webpack verwenden, vergessen Sie nicht, das Element-Tag zu schließen

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

Responsive Meta-Tag

Fügen Sie Ihrem Meta-Tag das reaktionsfähige Ansichtsfenster hinzu, um ein korrektes Rendern und Zoomen für alle Geräte zu gewährleisten <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Marcelo Österreich
quelle