Frustriert über die Reaktionsfähigkeit auf Handy

Question

Ich glaube, viele von euch haben dies schon einmal gesehen. Ich habe die Entwicklung meiner Site beendet. Während der Entwicklung verwendete ich Medienabfragen und nutze Firefox Responsive Design View. Ich machte eine Recherche, um zu sehen, was die gängigste Bildschirmauflösung ist, und fügte diese Auflösungen hinzu. Getestet auch mit Browsern zur Größenanpassung von Chrome und Opera.

Heute, als ich auf Handy getestet wurde (Moto G) scheint meine Seite nicht mehr zu reagieren. Ihr Layout hat sich nicht geändert. Eine andere Sache, die ich getan habe, war, die Chrome-Entwicklertools zu verwenden, die Device Toolbar aktiviert haben. Zu meiner Überraschung hat jedes ausgewählte Gerät mein Layout geändert.

Bei Medienabfragen habe ich die Breite min-width und max-width verwendet, um Anpassungen vorzunehmen. Lesen auf SO Ich sehe am meisten angezeigt ist die Gerätebreite anstelle der Breite zu verwenden.

Also, muss ich alle meine Medienabfragen ändern, um Ergebnisse auf dem Handy zu sehen? Habe ich die Bildschirmauflösung auf Computern verloren?

Answer 1

Vielleicht haben Sie die Dateien nicht auf Ihren Webserver hochgeladen? Oder wenn Sie Präprozessoren und eine App dafür verwenden, hat es Ihren Code vielleicht nicht konvertiert? Das sind nur meine Gedanken, nichts Ernstes.

Ich verwende diese Medien-Abfrage für mittleren Bildschirm:

@media screen and (max-width: 1199px) and (min-width: 992px) 

Es ist perfekt für mich arbeiten, und für die mobilen Bildschirm kann ich nicht einmal die Mindestbreite angeben.

Wie auch immer, ich brauche Code eingefügt zu jsFiddle, um Ihnen zu helfen, danke.

Answer 2

Nach einer weiteren Recherche fand ich heraus, dass ich Meta-Tag-Ansichtsfenster vergessen:

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

Hinzufügen, dass das Problem löst.