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

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?

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.

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.

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 */
}

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.

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.

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.

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.

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.