Soll ich die maximale Gerätebreite oder die maximale Breite verwenden?

81

Mit CSS-Medienabfragen können Sie max-device-widtheine Gerätebreite (z. B. ein iPhone oder ein Android-Gerät) und / oder eine max-widthGerätebreite festlegen.

Wenn Sie max-device-widthdie Größe des Browserfensters auf Ihrem Desktop ändern, ändert sich das CSS nicht, da sich die Größe Ihres Desktops nicht ändert.

Wenn Sie max-widthdie Größe des Browserfensters auf Ihrem Desktop ändern, wird Ihnen möglicherweise ein mobiles Design angezeigt, z. B. berührungsfreundliche Elemente und Menüs und dergleichen.

Das Targeting bestimmter Browser (und Geräte?) Ist jetzt veraltet und Sie sollten etwas agnostischer mit dem sein, auf das Sie abzielen. Gilt das auch für Medienabfragen?

Warum sollten Sie übereinander zielen? Welches ist das empfohlene?

Dies ist ein Beispiel für eine Medienabfrage, die ich auf einer Produktionswebsite verwende:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

Ich neige dazu, beide max-device-widthund zu verwenden max-width.

css responsive-design media-queries Jared
quelle
2
Gerätebreite

Antworten:

111

TL; DR

Wenn Sie eine reaktionsschnelle Website erstellen, verwenden Sie min-width/ max-widthin Ihren Medienabfragen anstelle von min-device-width/, max-device-widthum einen größeren Bereich von Bildschirmgrößen zu erreichen.

Gemäß dem Entwurf der Spezifikation für Medienabfragen der Stufe 4 für 2018 ist die device-widthMedienfunktion veraltet . Es wird aus Gründen der Abwärtskompatibilität beibehalten, sollte jedoch vermieden werden.

8. Anhang A: Veraltete Medienfunktionen

Zur Abfrage für die Größe des Bildfensters (oder der Seiten - Box auf Seite Medien), die width, heightund aspect-ratioMedia - Funktionen verwendet werden sollen, statt device-width, device-heightund device-aspect-ratio, die auf die physikalische Größe der das Gerät beziehen , unabhängig davon , wie viel Platz zur Verfügung steht für das Dokument wird ausgelegt. Die device-*Medienfunktionen werden manchmal auch als Proxy zum Erkennen mobiler Geräte verwendet. Stattdessen sollten Autoren Medienfunktionen verwenden, die den Aspekt des Geräts, gegen den sie zu stylen versuchen, besser darstellen.

Denken Sie als Randnotiz daran, im Abschnitt Ihres Dokuments ein Ansichtsfenster-Meta-Tag anzugeben <head>:

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

Erläuterung

Aufgrund all der unterschiedlichen möglichen Bildschirmauflösungen und Pixeldichten, die ein bestimmtes Gerät haben kann, ist ein Pixel kein Pixel, da verschiedene Dinge zu berücksichtigen sind (Zoom, Pixeldichte, Bildschirmauflösung und -größe, Geräteorientierung, Seitenverhältnis usw.) ..). In diesem Fall wird ein Pixel tatsächlich als "optische Referenzeinheit" und nicht als physikalisches Hardwarepixel bezeichnet.

Glücklicherweise können Sie im Abschnitt Ihres Dokuments ein Ansichtsfenster-Meta-Tag angeben <head>, um die Breite und Skalierung des Ansichtsfensters des Browsers zu steuern. Wenn dieses Tag den contentWert "hat" width=device-width, stimmt die Bildschirmbreite mit den geräteunabhängigen Pixeln überein und stellt sicher, dass alle verschiedenen Geräte skaliert werden und sich konsistent verhalten.

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

In Bezug auf Medienabfragen möchten Sie wahrscheinlich max-widtheher als verwenden max-device-width, da dies max-widthauf das Ansichtsfenster (aktuelles Browserfenster) abzielt, während max-device-widthes auf die tatsächliche Vollbildgröße / Auflösung des Geräts abzielt.

Mit anderen Worten, wenn Sie verwenden max-device-width, werden beim Ändern der max-widthGröße Ihres Desktop-Browsers keine unterschiedlichen Medienabfragen angewendet, da im Gegensatz dazu nur die tatsächliche Vollbildgröße des Geräts berücksichtigt wird. nicht die aktuelle Größe des Browserfensters.

Dies macht einen großen Unterschied, wenn Sie versuchen, ein adaptives Layout zu erstellen, da die Site beim Ändern der Größe des Browsers nicht reagiert. Wenn Sie max-device-widthdie Medienabfragen verwenden, die Sie für Geräte mit kleineren Bildschirmen verwenden, gelten diese auch dann nicht für Desktops, wenn Sie die Größe des Browserfensters auf die kleinere Bildschirmgröße verkleinern.

Ab 2018 hat der neueste Entwurf der device-widthMedienabfragespezifikation die Medienfunktion tatsächlich veraltet , daher sollte sie vermieden werden.

Darüber hinaus wird in diesem Artikel über Google-Entwickler dringend davon abgeraten, Folgendes zu verwenden max-device-width:

Google Developers - Web Fundamentals - Responsive CSS-Medienabfragen

Es ist auch möglich, Abfragen basierend auf zu erstellen *-device-width. von dieser Praxis wird jedoch dringend abgeraten .

Der Unterschied ist subtil, aber sehr wichtig: Er min-widthbasiert auf der Größe des Browserfensters, während er min-device-widthauf der Größe des Bildschirms basiert. Leider melden einige Browser, einschließlich des älteren Android-Browsers, die Gerätebreite möglicherweise nicht richtig und stattdessen die Bildschirmgröße in Gerätepixeln anstelle der erwarteten Breite des Ansichtsfensters.

Darüber hinaus kann durch die Verwendung *-device-widthverhindert werden, dass sich Inhalte auf Desktops oder anderen Geräten anpassen, deren Fenstergröße geändert werden kann, da die Abfrage auf der tatsächlichen Gerätegröße und nicht auf der Größe des Browserfensters basiert.

Weiterführende Literatur:

Josh Crozier
quelle
2
Stimmen Sie mit allem überein, was Sie sagen, aber vergessen Sie die Abwärtskompatibilitätsseite, die in einigen Jahren nicht mehr relevant sein wird. Warum sollte eine Desktop-Site anders funktionieren, weil wir jetzt Handys haben?
John Magnolia
2
Ich denke einfach nicht, dass eine mobile Site jemals auf einem Desktop angezeigt werden sollte. Sie sollten in der Lage sein, die Größe des Browsers auf eine beliebige Breite zu ändern und die horizontale Bildlaufleiste zu verwenden. Angenommen, Sie wollten einen Abschnitt von 2 Websites vergleichen, aber die Seitenleiste ausblenden. Sie würden in 2 Fenstern öffnen und die Größe nebeneinander ändern
John Magnolia
3
Ich stimme John M zu, Google ist falsch. Ich persönlich habe festgestellt, dass ihre reaktionsschnelle Designdokumentation zu den schlimmsten Modeerscheinungen gehört, da die Kinder, die sie schreiben, nur bei Google angestellt sind. Ich habe dies anfangs positiv bewertet, aber die Antwort ist meiner Meinung nach falsch, nur weil immer mehr Websites ihre Desktop-Benutzererfahrung ruinieren Meinung) bedeutet nicht, dass Sie die Erfahrung Ihres Desktop-Benutzers ruinieren müssen. Wir machen das nicht und haben die Conversions um das 10-fache erhöht.
Lizardx
"Wenn dieses Tag einen Inhaltswert von hat width=device-width, stimmt die Bildschirmbreite mit den geräteunabhängigen Pixeln überein." Und wenn Sie auf einem iOS-Gerät surfen, dpsentspricht dies nicht dem, was? iOS Punkte? (Vielen Dank für diesen Beitrag übrigens!)
in_flight
Die Antwort ist etwas veraltet. Es ist nichts falsch daran max-device-widthund es ist wichtig, wenn Sie es in anpassbaren Ansichtsfensterumgebungen (Desktop) verwenden möchten. min-device-widthist immer noch schlecht.
ShortFuse
6

Gerätebreite vermeiden. Der Grund ist, dass Sie nicht wissen können, wie die Browser des Benutzers darauf reagieren.

Für IOS scheint es zumindest mit Safari einfach zu sein. Es scheint eine einzige Antwort auf Gerätebreite zu sein, unabhängig von der Ausrichtung. Außerdem wird die Gerätebreite nur für die kürzere Seite des Geräts angegeben. Ich habe dies auf iPhone 4S und iPad getestet. Sie antworteten auf 320 bzw. 768, unabhängig von der Ausrichtung.

Für Android ist es unvorhersehbarer. Ich habe sechs Browser auf einem Huawei Ascend Y330 getestet (Android-Standardbrowser, Chrome, Opera, Firefox, Firefox Beta, Dolphin). Die Antwort variiert je nach Browsertyp und Ausrichtung.

Ich habe auf einer Seite mit Abfrage (max-Gerätebreite: *** px) getestet und herausgefunden, welchen px-Wert ich ausfüllen muss, um die Abfrage in einen echten Zustand zu versetzen. Je nach Browsertyp und Ausrichtung wurden vier verschiedene Werte benötigt (320, 480, 534, 800). Dies macht die Gerätebreite unbrauchbar.

Håkan Olsson
quelle
1
Die Gerätebreite ist die einzige zuverlässige Methode, um das vom Benutzer verwendete Gerät zu ermitteln, sodass Sie das Layout entsprechend anpassen können. Wenn Sie das Layout basierend auf den Pixeln im Ansichtsfenster anpassen, erhalten Sie auf einigen Desktops ein mobiles Design, nur weil der Benutzer hineingezoomt hat. Dies führt häufig zu dem Gegenteil von dem, was der Benutzer wollte (was nur eine kleine Vergrößerung ist)
Alice Wonder
Sie sollten Fehlerberichte mit mobilen Browsern ablegen, die keine genaue Gerätebreite melden. In vielen Fällen stellte ich fest, dass alternative Browser standardmäßig so eingestellt waren, dass sie sich als Desktop-Browser ausgaben und 1 Gerätepixel pro CSS-Pixel verwendeten - und das ist wahrscheinlich das Problem, das Sie hatten.
Alice Wonder
5

Wenn Sie die maximale Breite verwenden und die Größe des Browserfensters auf Ihrem Desktop ändern, wird möglicherweise ein mobiles Design angezeigt, z. B. berührungsfreundliche Elemente und Menüs und dergleichen.

Es ist schockierend für mich, dass es eine populäre Meinung zu sein scheint, dass dies wünschenswert ist. Ich habe nicht herausgefunden, ob das Design von Flüssigkeiten / Flüssigkeiten vor dem Handy aus den falschen oder richtigen Gründen als schlecht angesehen wurde. Es scheint mir, dass dies nur eine schickere Version des flüssigen Layouts ist, aber eine, die Designer aus irgendeinem Grund annehmen.

Als sich die gesamte Design-Community Mitte der 2000er Jahre entschied, feste Layouts anstelle von Flüssigkeit zu verwenden, war dies darauf zurückzuführen, dass Textrückflüsse die Lesbarkeit beeinträchtigten und häufig zu Witwen und anderen typografischen Artefakten führten. Darüber hinaus war die Pflege der Codebasis von Design zu Design oft schwierig, um zu verhindern, dass Elemente kollidieren usw. Der einzige Unterschied zwischen flüssigen Layouts und reaktionsschnellem Design besteht darin, dass reaktionsschnell aufgrund besserer Browser und der Verbreitung von mauerwerkartigen Frameworks die Ausführung erleichtert.

Ich persönlich verwende die minimale / maximale Gerätebreite, weil ich lieber Desktop-Dokumentkonventionen befolge, die jahrzehntelangen Vorrang haben. Nicht alle Dokumente, die Sie im Internet öffnen, verhalten sich auf einem Desktop so, noch andere Arten von Dokumenten oder Anwendungen, die Sie auf Ihren Desktop laden. Seiten, die vor der Dominanz von Mobilgeräten erstellt wurden, wie MS Word, Photoshop usw., behalten ihre Bildlaufpositionen bei und ändern ihre Layouts nicht, sodass Benutzer den Inhalt des Seitenflusses verfolgen können, wenn sie die nicht verwandte Aufgabe der Fensterverwaltung ausführen.

Im Allgemeinen verwende ich 3 Haltepunkte: einen für Telefone, einen für Tablets und einen für Desktops. Der Desktop und häufig zumindest das Querformat sind fixiert und das Tablet-Porträt und darunter sind flüssig. Diese Kombination aus adaptiv und reaktionsschnell ermöglicht es dem Desktop, sich wie eine Desktop-Site zu verhalten, ohne dass ich 10 separate Layouts für mobile Geräte mit fester Breite benötigen muss. Der Text fließt auf Mobilgeräten nicht erneut, da die Größe des Ansichtsfensters nicht geändert werden kann.

Paul Fox
quelle
2
Es gibt einige Handys, bei denen die Größe des Ansichtsfensters geändert werden kann. Beispielsweise ermöglicht Windows das "Einrasten" mehrerer Apps auf dem Bildschirm, und einige Android-Telefone unterstützen die Fensterung, um zwei Apps gleichzeitig anzuzeigen. Objektiv verstehe ich nicht, warum Sie kein Layout im Tablet-Stil auf einem kleineren Desktop mit Bildschirm haben möchten, aber subjektiv hängt es vom Layout ab.
Mark
2
Ich habe auch min / max-Gerätebreite verwendet, aber zu meinem Entsetzen hat ein Client Hotjar eingerichtet, das kleine Videos der Benutzerinteraktion mit Ihrer Site erstellt, und ich habe festgestellt, dass das neue Android 6 Samsung Galaxy 6 die Pixelanzahl von min behandelt / max-Gerätebreite als tatsächliche Bildschirmpixel, nicht als CSS-Pixel, was natürlich dazu führte, dass die Seite vom Bildschirm verschwand. In unserem Fall war es so, dass die Benutzer mit diesen 4x Pixeldichte-Bildschirmen eine Mischung aus Mobil- und Desktop-CSS erhielten. Persönlich glaube ich nicht, dass Responsive einen Platz auf einem gut gemachten Desktop-Display hat, was für Benutzer schlecht ist. Also sei vorsichtig.
Lizardx
2
Paul, es bedurfte einiger Nachforschungen, um herauszufinden, was los ist. Joshs Antwort ist meiner Meinung nach falsch, ebenso wie die von Google. Die Vorstellung, dass Desktops reagieren sollten, ist nur eine Modeerscheinung, die von Gruppen wie Google befeuert wird, und die verschiedenen Einheitsgrößen passen zu allen CSS-Frameworks. Unser Problem kam von schlechter Hotjar-Programmierung, Punkt. Meine Triggerpunkte behandeln jedes Gerät mit großem Bildschirm mit ein paar Änderungen als Desktop und gehen dann zu dem Punkt, an dem der Ansichtsport nur ein mobiles Gerät wäre. Für Benutzer, die Klarheit suchen, würde ich Pauls Antwort als richtig und die Modeerscheinungen als falsch betrachten.
Lizardx
1
Zu Ihrer Information*-device-width
Josh Crozier
Dies ist eine alte Antwort, aber selbst 2014 würde ich dem überhaupt nicht zustimmen. Diese typografischen Fehler, auf die verwiesen wird, und „kollidierende Elemente“ lassen sich so leicht vermeiden, indem man sich angewöhnt, bewährte Verfahren zu befolgen. Die Bildschirmauflösung wird verrückt und wahr, skalierbares, reaktionsschnelles Design wird im Laufe der Zeit immer wichtiger, während feste Websites nur noch unzugänglicher werden.
kleiner winziger Mann