Der beste Weg, um mobile css Medien abzufragen

Question

Ich bin neu zu responsive CSS. Ich habe viel über Medienabfragen gelernt, aber ich habe immer noch nicht herausgefunden, welches der beste Weg ist, um zu erkennen, ob der Benutzer ein Handy benutzt oder nicht. Die Medienabfrage zur Identifizierung eines mobilen Benutzers verwendet die Gerätebreite, aber welcher ist der beste Wert, um den Haltepunkt festzulegen? Wenn ich mein Android-Smartphone mit Google Chrome verwende, ist die Breite der Seite etwa 400px, selbst wenn die tatsächliche Auflösung Full HD, 1080px Breite ist. Kommt es auf den Browser an, oder was? Ich habe gesehen, dass jemand die Messung verwendet, um den Haltepunkt zu setzen, ist das genauer? Ich würde gerne mehr über die Handheld-Eigenschaft wissen. Schließlich, nachdem Sie viele verschiedene Informationen gelesen haben, können Sie mir bitte sagen, welches der effektivste Weg ist, die beste Medienabfrage, wenn der Kunde mobil ist oder nicht? Vielen Dank.

Answer 1

Die Medienabfrage zum Identifizieren eines mobilen Benutzers verwendet die Gerätebreite, aber welcher ist der beste Wert zum Festlegen des Haltepunkts?

Es gibt ein paar Theorien darüber, wie man damit umgeht. Manche Leute gehen und finden die beliebtesten Gerätebreiten und setzen ihre Haltepunkte an diesen Stellen. Das ist großartig, wenn Sie genau wissen, was die meisten Nutzer Ihrer Website verwenden. Die Nachteile sind jedoch, dass Sie Ihr Design an diese Breiten anpassen müssen und Sie Ihren Code ständig aktualisieren müssen, wenn neue Geräte herauskommen.

So würden Ihre Haltepunkte so etwas wie:

// iPhone 6 
@media only screen and (min-device-width : 375px) { 
    // styles go here 
} 
// iPhone 6+ 
@media only screen and (min-device-width : 414px) { 
    // styles go here 
} 

Die andere Theorie es vollständig skalierbar in jeder Größe zu machen ist, unabhängig davon, was das Gerät ist. Der Vorteil ist, dass Sie sicherstellen können, dass Ihr Design auf allen Geräten gut aussieht. Der Nachteil ist, dass es Ihren Code etwas aufgeblähter macht. Die Haltepunkte hier wären wo auch immer Sie sie brauchen. Ich persönlich benutze diese Methode, aber beginne mit den Breakpoints bei 1200 und gehe bei Bedarf auf 1100, 1000. Wenn ich mobil werde zuerst werde ich mit 320 beginnen, 350, 400, 500, etc ...

Bei der Verwendung von meinem Android-Smartphone mit Google Chrome, die Breite der Seite ist über 400px, auch dachte die echte Auflösung ist Full HD, 1080px Breite. Kommt es auf den Browser an, oder was?

Die Gerätebreite hat viele Faktoren. Die Gerätebreite ist jedoch grundsätzlich die Anzahl der Pixel, die der Browser anzeigt. Es gibt ein wenig mehr als das, aber Ihre beste Wette ist Google Gerätebreiten.

Ich sah, dass jemand die em mesure verwendet, um den Haltepunkt zu setzen, ist das genauer?

Nein. Es ist nur eine Möglichkeit, sich von einem übergeordneten Element zu trennen. Bis Sie mehr Zeit haben, um dies zu erforschen, bleiben Sie mit Pixeln.

Endlich, nach vielen verschiedenen Informationen lesen zu müssen, können Sie mir bitte sagen, welche der moste effektive Weg, die beste Media-Abfrage zu fangen, wenn der Kunde mobil ist oder nicht? Vielen Dank.

Der beste Weg, dies zu tun, ist Ihre Breakpoints zu bestimmen. Sie können mobile Browser nicht gezielt mithilfe von CSS ausrichten.Sie können nur die Attribute dieser Browser anvisieren (Breite, Höhe, Ausrichtung), so dass Sie wissen, dass das iPhone6 ​​im Hochformat 375 Pixel breit ist. Sie können sie also mit dieser Breite ausrichten. Wie Allan sagte, können Sie Geräte mit JavaScript- oder serverseitigen Bibliotheken als Ziel verwenden und auf diese Weise Klassen hinzufügen. Aber IMO ist es besser, mit Gerätebreiten zu bleiben und diese für Situationen zu speichern, in denen Sie absolut feststecken.