Was ist der Unterschied zwischen maximaler Gerätebreite und maximaler Breite für mobiles Web?

242

Ich muss einige HTML-Seiten für iPhone / Android-Handys entwickeln, aber was ist der Unterschied zwischen max-device-widthund max-width? Ich muss verschiedene CSS für verschiedene Bildschirmgrößen verwenden.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

Was ist der Unterschied?

virsir
quelle
1
Ich habe festgestellt, dass dies max-device-widthauch dann funktioniert, wenn das <meta name="viewport" ...>Tag für Geräte mit kleinem Bildschirm nicht enthalten ist und max-widthohne metaTag nicht funktioniert
Faizan Akram Dar

Antworten:

252

max-width ist die Breite des Zielanzeigebereichs, z. B. des Browsers

max-device-width ist die Breite des gesamten Rendering-Bereichs des Geräts, dh des tatsächlichen Gerätebildschirms

Gleiches gilt für max-heightund max-device-heightnatürlich.

Ian Devlin
quelle
15
Wenn Sie die Änderung beim Ändern der Größe Ihres Browsers sehen möchten, verwenden Sie für die Entwicklung die maximale Breite, obwohl die maximale Gerätebreite für die Produktion genauer ist.
John Magnolia
31
@JohnMagnolia Was lässt Sie denken, dass die maximale Gerätebreite für die Produktion besser ist? Würde die maximale Breite nicht unabhängig vom Gerät eine bessere Reaktionsfähigkeit garantieren?
e_known
8
@ bekannt Ich stimme zu. Benutzer aus dem gesamten Spektrum an Fähigkeiten / Kenntnissen haben ihr Desktop-Browserfenster nicht immer maximiert (aber ich habe noch kein Tablet oder Telefon gesehen, auf dem ein Browser NICHT maximiert geöffnet ist - ich nehme an, dass dies in einer Hybrid-App möglich ist, aber das ist möglich ist ein anderer Fall). Die maximale Breite wäre sicherlich universeller.
Jason
2
@ bekannt Ich bin nicht einverstanden. Abhängig von Ihren Stilen sehen Sie nach dem Erreichen dieses Medien-Haltepunkts möglicherweise ganz anders aus. Wenn Sie Stylesheets basierend auf Medien-Haltepunkten laden, kann es sehr beunruhigend sein, dass die Site beim Ändern der Größe des Browserfensters ein ganz anderes Aussehen erhält.
TwinPrimesAreEz
2
Wenn Sie ein radikal anderes Layout für mobile Geräte haben, liegt der Hauptgrund wahrscheinlich darin, dass kein Mauszeiger vorhanden ist (sie benötigen größere Schaltflächen und eine einzelne Spalte zum Scrollen). Eine großartige Medienabfrage, die in diesem Fall verwendet werden muss, ist @media screen and (pointer: coarse) and (hover: none)die Umstellung auf die mobile Version, unabhängig davon, wie viele Pixel mobile Geräte in Zukunft auf ihren Bildschirmen speichern.
EoghanM
81

max-widthbezieht sich auf die Breite des Ansichtsfensters und kann verwendet werden, um bestimmte Größen oder Ausrichtungen in Verbindung mit festzulegen max-height. Unter Verwendung mehrerer max-width(oder min-width) Bedingungen können Sie das Seitenformat ändern, wenn die Größe des Browsers geändert wird oder sich die Ausrichtung auf einem Gerät wie einem iPhone ändert.

max-device-widthbezieht sich auf die Größe des Ansichtsfensters des Geräts, unabhängig von Ausrichtung, aktuellem Maßstab oder Größenänderung. Dies ändert sich auf einem Gerät nicht und kann daher nicht zum Wechseln von Stylesheets oder CSS-Anweisungen verwendet werden, wenn der Bildschirm gedreht oder in der Größe geändert wird.

voncox
quelle
11
Diese Antwort machte es für mich besser "klicken" als die akzeptierte Antwort. Es klingt wie für die meisten Anwendungen max-widthund max-heightwird diejenigen sein, die verwendet werden sollen.
hotshot309
2
@JackieChiles macht einen guten Punkt in einem anderen SO-Thread, den man berücksichtigen sollte (in Bezug auf mobile Stile, die auf größeren Geräten angezeigt
hotshot309
5
Diese gute Antwort ist nicht vollständig: Die Ausrichtung vertauscht Gerätebreite und Gerätehöhe unter Android, jedoch nicht unter iOS: siehe quirksmode.org/blog/archives/2010/04/the_orientation.html .
16

Was denkst du über diesen Stil?

Für alle Haltepunkte, die hauptsächlich für "mobile Geräte" verwendet werden, min(max)-device-widthund für Haltepunkte, die hauptsächlich für "Desktop" verwendet werdenmin(max)-width .

Es gibt viele "mobile Geräte", die die Breite schlecht berechnen.

Schauen Sie sich http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml an :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}
1ubos
quelle
Beantwortet die Frage nicht und ist tatsächlich eine schlechte Möglichkeit, an Ihren Haltepunkten zu arbeiten - seien Sie vorsichtig.
Vierzig
8

Die maximale Gerätebreite ist die Renderbreite des Geräts

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

Die maximale Breite ist die Breite des Zielanzeigebereichs, dh die aktuelle Größe des Browsers.

Sarath
quelle
2
@media all und (max-width: 400px) {} Was ist der Unterschied
virsir
5

Der Unterschied besteht darin, dass die maximale Gerätebreite die gesamte Bildschirmbreite ist und die maximale Breite den vom Browser zum Anzeigen der Seiten verwendeten Platz bedeutet. Ein weiterer wichtiger Unterschied ist die Unterstützung von Android-Browsern. Wenn Sie die maximale Gerätebreite verwenden, funktioniert dies nur in Opera. Stattdessen bin ich sicher, dass die maximale Breite für alle Arten von mobilen Browsern funktioniert. Ich hatte es in Chrome, Firefox und Oper für ANDROID getestet.

Danny
quelle
5

Die maximale Breite ist die Breite des Zielanzeigebereichs, z. B. des Browsers. maximale Gerätebreite ist die Breite des gesamten Renderbereichs des Geräts, dh des tatsächlichen Gerätebildschirms.

• Wenn Sie die maximale Gerätebreite verwenden und die Größe des Browserfensters auf Ihrem Desktop ändern, ändert sich der CSS-Stil nicht in eine andere Einstellung für Medienabfragen.

• Wenn Sie die maximale Breite verwenden und die Größe des Browsers auf Ihrem Desktop ändern, ändert sich das CSS in eine andere Einstellung für Medienabfragen, und möglicherweise wird Ihnen das Styling für Mobiltelefone angezeigt, z. B. berührungsfreundliche Menüs.

Glücklicher Chaturvedi
quelle
3

Wenn Sie eine plattformübergreifende App erstellen (z. B. mit Phonegap / Cordova), dann

Verwenden Sie keine Gerätebreite oder Gerätehöhe. Verwenden Sie lieber Breite oder Höhe in CSS-Medienabfragen, da Android-Geräte Probleme mit der Gerätebreite oder -höhe verursachen. Für iOS funktioniert es gut. Nur Android-Geräte unterstützen keine Gerätebreite / Gerätehöhe.

Himanshu Garg
quelle
2

Verwenden Sie keine Gerätebreite / -höhe mehr.

Gerätebreite, Gerätehöhe und Geräteseitenverhältnis sind in Media Queries Level 4 veraltet: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Verwenden Sie einfach Breite / Höhe (ohne Min / Max) in Kombination mit Ausrichtung und (Min / Max-) Auflösung, um bestimmte Geräte anzusprechen. Auf Mobilgeräten sollte Breite / Höhe mit Gerätebreite / -höhe übereinstimmen.

SammieFox
quelle
Die einfachen "device-xxx" -Elemente sind veraltet, die "max-device-xxx" -Elemente sind NICHT veraltet.
Roger Krueger
1
@ RogerKrueger Bist du dir da sicher? Ich sehe nichts, was darauf hindeutet, dass max-device-xxx-Medienabfragen nicht veraltet sind.
Jonny Cook