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 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?
css
mobile-website
media-queries
virsir
quelle
quelle
max-device-width
auch dann funktioniert, wenn das<meta name="viewport" ...>
Tag für Geräte mit kleinem Bildschirm nicht enthalten ist undmax-width
ohnemeta
Tag nicht funktioniertAntworten:
max-width
ist die Breite des Zielanzeigebereichs, z. B. des Browsersmax-device-width
ist die Breite des gesamten Rendering-Bereichs des Geräts, dh des tatsächlichen GerätebildschirmsGleiches gilt für
max-height
undmax-device-height
natürlich.quelle
@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.max-width
bezieht sich auf die Breite des Ansichtsfensters und kann verwendet werden, um bestimmte Größen oder Ausrichtungen in Verbindung mit festzulegenmax-height
. Unter Verwendung mehrerermax-width
(odermin-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-width
bezieht 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.quelle
max-width
undmax-height
wird diejenigen sein, die verwendet werden sollen.Was denkst du über diesen Stil?
Für alle Haltepunkte, die hauptsächlich für "mobile Geräte" verwendet werden,
min(max)-device-width
und 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 :
quelle
Die maximale Gerätebreite ist die Renderbreite des Geräts
Die maximale Breite ist die Breite des Zielanzeigebereichs, dh die aktuelle Größe des Browsers.
quelle
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.
quelle
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.
quelle
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.
quelle
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.
quelle