web-dev-qa-db-ger.com

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-width und max-width? Ich muss unterschiedliche CSS für unterschiedliche Bildschirmgrößen verwenden.

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

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

Was ist der Unterschied?

236
virsir

max-width ist die Breite des Zielanzeigebereichs, z. der Browser

max-device-width ist die Breite des gesamten Wiedergabebereichs des Geräts, d. h. des tatsächlichen Gerätebildschirms

Gleiches gilt für max-height und max-device-height natürlich.

243
Ian Devlin

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

max-device-width bezieht sich auf die Ansichtsfenstergröße des Geräts, unabhängig von Ausrichtung, aktueller Skalierung 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.

81
voncox

Was denkst du über die Verwendung dieses Stils?

Für alle Haltepunkte, die hauptsächlich für "mobile Geräte" bestimmt sind, verwende ich min(max)-device-width und für Haltepunkte, die hauptsächlich für "desktop" bestimmt sind, min(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 */
}
15
1ubos

max-device-width hat konstante Werte (wahrscheinlich zwei)

@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.

6
Sarath

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. Ich bin mir jedoch sicher, dass die maximale Breite erreicht wird funktioniert für alle Arten von mobilen Browsern (ich hatte es in Chrome, Firefox und opera für Android) getestet).

5
Danny

Wenn Sie eine plattformübergreifende App erstellen (z. B. mit phonegap/cordova),

Verwenden Sie keine Gerätebreite oder Gerätehöhe. Verwenden Sie lieber width oder height in CSS-Medienabfragen, da Android device Probleme mit der Gerätebreite oder -höhe verursacht. Für iOS funktioniert dies problemlos. Nur Android Geräte unterstützen keine Gerätebreite/Gerätehöhe.

3
Himanshu Garg

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

gerätebreite, Gerätehöhe und Geräte-Seitenverhä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 auf bestimmte Geräte abzuzielen. Auf dem Handy sollte Breite/Höhe der Gerätebreite/-höhe entsprechen.

2
SammieFox

max-width ist die Breite des Zielanzeigebereichs, z. der Browser; max-device-width ist die Breite des gesamten Wiedergabebereichs des Geräts, d. h. des tatsächlichen Gerätebildschirms.

• Wenn Sie max-device-width verwenden und die Größe des Browserfensters auf Ihrem Desktop ändern, ändert sich der CSS-Stil nicht in eine andere Medienabfrageeinstellung.

• Wenn Sie max-width verwenden und die Größe des Browsers auf Ihrem Desktop ändern, ändert sich das CSS in eine andere Medienabfrageeinstellung, und Sie werden möglicherweise mit dem Styling für Handys angezeigt, z als berührungsfreundliche Menüs.

2