it-swarm.com.de

Soll ich max-device-width oder max-width verwenden?

Bei CSS-Medienabfragen können Sie max-device-width, um eine Gerätebreite (z. B. ein iPhone oder Android Gerät) und/oder ein max-width, das auf eine Seitenbreite abzielt.

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

Wenn du benutzt max-width Wenn Sie 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.

Das Targeting auf bestimmte Browser (und Geräte?) Ist jetzt veraltet und Sie sollten etwas agnostischer mit dem sein, was Sie als Ziel angeben. Gilt das auch für Medienanfragen?

Warum sollten Sie eines über das andere richten? 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-width und max-width.

75
Jared

TL; DR

Wenn Sie eine responsive Website erstellen, verwenden Sie min-width/max-width In Ihren Medienabfragen und nicht min-device-width/max-device-width, Um ein breiteres Spektrum von Websites zu erreichen Bildschirmgrößen.

Gemäß dem Spezifikationsentwurf 2018 Media Queries Level 4 ist die Medienfunktion device-width veraltet . Es wird aus Gründen der Abwärtskompatibilität beibehalten, sollte jedoch vermieden werden.

8. Anhang A: Veraltete Medienfunktionen

Um die Größe des Ansichtsfensters (oder des Seitenrahmens auf Seitenmedien) abzufragen, sollten die Medienfunktionen width, height und aspect-ratio Anstelle von device-width, device-height Und device-aspect-ratio, Die sich auf die physische Größe des Geräts beziehen, unabhängig davon, wie viel Platz für das Dokument zur Verfügung steht. Die Medienfunktionen device-* Werden manchmal auch als Proxy zum Erkennen mobiler Geräte verwendet. Stattdessen sollten Autoren Medienfunktionen verwenden, die den Aspekt des Geräts, mit dem sie einen Stil erstellen möchten, besser darstellen.

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

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

Erläuterung

Aufgrund der unterschiedlichen möglichen Bildschirmauflösungen und Pixeldichten kann ein bestimmtes Gerät ein Pixel ist kein Pixel haben, 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 Hardware-Pixel bezeichnet.

Glücklicherweise können Sie im Abschnitt <head> Ihres Dokuments ein Ansichtsfenster-Metatag angeben, um die Breite und Skalierung des Ansichtsfensters des Browsers zu steuern. Wenn dieses Tag einen content -Wert von width=device-width Hat, wird die Bildschirmbreite entspricht den geräteunabhängigen Pixeln und es wird sichergestellt, dass alle verschiedenen Geräte skaliert werden und sich konsistent verhalten.

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

Bei Medienabfragen sollten Sie wahrscheinlich max-width Anstelle von max-device-width Verwenden, da max-width Auf das Ansichtsfenster (aktuelles Browserfenster) abzielt, während max-device-width richtet sich nach der tatsächlichen Vollbildgröße/-auflösung des Geräts.

Mit anderen Worten, wenn Sie max-device-width Verwenden, werden beim Ändern der Größe Ihres Desktop-Browsers keine unterschiedlichen Medienabfragen angewendet, da im Gegensatz zu max-width 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 Browsergröße nicht reagiert. Wenn Sie max-device-width Verwenden, gelten die Medienabfragen, die Sie für Geräte mit kleineren Bildschirmen verwenden, auch dann nicht für Desktops, wenn Sie das Browserfenster verkleinern, um es der kleineren Bildschirmgröße anzupassen.

Ab 2018 hat das neueste Entwurf der Medienabfrage die Medienfunktion device-width Abgelehnt, daher sollte dies vermieden werden.

Darüber hinaus wird in diesem Artikel über Google Developers die Verwendung von max-device-width Dringend empfohlen:

Google Developers - Web Fundamentals - Responsive CSS-Medienabfragen

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

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

Darüber hinaus kann die Verwendung von *-device-width Verhindern, dass Inhalte auf Desktops oder anderen Geräten angepasst werden, auf denen die Größe von Fenstern geändert werden kann, da die Abfrage auf der tatsächlichen Gerätegröße und nicht auf der Größe des Browserfensters basiert.

Weitere Lektüre:

101
Josh Crozier

Gerätebreite vermeiden. Der Grund dafür ist, dass Sie nicht wissen können, wie die Browser der Benutzer darauf reagieren.

Für IOS scheint es zumindest mit Safari einfach zu sein. Es scheint sich um eine einzige gerätebreite Antwort zu handeln, die unabhängig von der Ausrichtung ist. 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, egal in welcher Richtung.

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 Reaktion variiert je nach Browsertyp und Ausrichtung .

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

6
Håkan Olsson

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.

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 Fluid/Liquid-Design vor dem Mobilen aus den falschen oder den richtigen Gründen als schlecht angesehen wurde. Es scheint mir, dass dies nur eine schickere Version des Liquid-Layouts ist, die Designer jedoch aus irgendeinem Grund begrüßen.

Als sich die Design-Community Mitte der 2000er-Jahre entschied, feste Layouts anstelle von Liquid zu verwenden, war dies darauf zurückzuführen, dass Text-Reflows die Lesbarkeit beeinträchtigten, was häufig zu Witwen und anderen typografischen Artefakten führte. Darüber hinaus war es oft schwierig, die Codebasis von Entwurf zu Entwurf beizubehalten, um zu verhindern, dass Elemente kollidieren. Der einzige Unterschied zwischen flüssigen Layouts und reaktionsfreudigem Entwurf besteht darin, dass reaktionsfreudige Frameworks aufgrund besserer Browser und der Verbreitung von mauerwerkartigen Frameworks die Ausführung erleichtern.

Ich persönlich benutze die minimale/maximale Gerätebreite, weil ich lieber Desktop-Dokumentenkonventionen befolge, die jahrzehntelang Vorrang haben. Weder 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 Bildlaufposition und ändern ihre Layouts nicht, sodass Benutzer den Inhalt im Seitenfluss verfolgen können, wenn sie die nicht zusammenhängende Aufgabe der Fensterverwaltung ausführen.

Im Allgemeinen verwende ich drei Haltepunkte: einen für Telefone, einen für Tablets und einen für Desktops. Der Desktop und oft zumindest das Querformat sind fest und das Tablet-Hochformat und darunter flüssig. Diese Kombination aus adaptiv und reaktionsfreudig ermöglicht es dem Desktop, sich wie eine Desktop-Site zu verhalten, ohne dass es erforderlich ist, 10 separate Layouts für Mobilgeräte mit fester Breite zu erstellen. Auf Mobilgeräten wird der Text nicht umgeleitet, da die Größe des Ansichtsfensters nicht geändert werden kann.

5
Paul Fox