it-swarm.com.de

Medienabfragen verhalten sich unter Android nicht wie erwartet

Ich habe 4 Medienanfragen. Die 1., 3. und 4. Arbeit, aber die 2. scheint nicht zu aktivieren.

Warum verwendet die 480 x 720 (zweite Medienabfrage) standardmäßig die erste Medienabfrage?

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

Was wird erwartet:

1st Media Query CSS Output2nd Media Query CSS Output3rd Media Query CSS Output4th Media Query CSS Output

Was ist eigentlich passiert:

2nd Media Query fails1st Media Query passes3rd Media Query passes4th media query passes

Warum verwendet die 480 x 720 (zweite Medienabfrage) standardmäßig die erste Medienabfrage?

14
Xavier

Ich denke, Sie müssen eine Geräteauflösungserkennung in Ihrer Medienabfrage in Anlehnung an durchführen

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}  

Prüfen Sie David Calhouns hervorragenden Artikel über Best Practices für Mobilgeräte .

9
DyeA

Ich bin ein Neuling in Android und CSS.

Ich habe behoben, dass Android mit einer Zeile in der Kopfzeile meiner index.html-Datei nicht die richtige Größe angibt:

<meta name="viewport" content="width=device-width" />

Von da an haben meine CSS-Dateien das getan, was ich erwartet hatte!

24
JohanO

Nachdem ich viele Nachforschungen angestellt habe, bin ich zu dem Schluss gekommen, dass Android-Telefone, die sagen, dass sie 480 x 720 Pixel (800 x 854 Pixel) sind, tatsächlich keine höhere Bildschirmdichte verwenden, um Elemente größer aussehen zu lassen, damit sie tatsächlich ausgeführt werden bei 320px von XXX , aber der Benutzer kann die Auflösung auf eine niedrigere Spezifikation ändern, wenn er dies wünscht. Der Grund dafür, dass die Medienabfrage nicht funktionierte, war, dass die Größen für das betreffende Gerät nicht relevant waren.

Wenn Sie auf dem SDK haben, habe ich die Bildschirmdichte auf 160 geändert, um eine Breite von 480px zu erreichen.

Und ich kann bestätigen, dass ich dies auf dem SDK und 2x Handsets getestet habe.

Hinweis: Dies war meine persönliche Erfahrung, es könnte für andere Benutzer anders sein

12
Xavier

Ich hatte die gleichen Probleme bei der Arbeit an einer Cordova-Anwendung für Android-Plattformen. Dank der letzten Antwort habe ich versucht herauszufinden, wo die Unterschiede zwischen meiner Medienabfrage und der Breite des Gerätebildschirms liegen.

Ich habe zuerst versucht:

@media only screen and (max-device-width: 480px) { ... }

Passend zu Geräten wie HTC Desire HD | Samsung Galaxy S. Aber ich musste auch spezielle Korrekturen für das Samsung Galaxy Note vornehmen, also habe ich verwendet:

@media only screen and (min-device-width: 481px) { ... }

Aber diese Auflösungen werden, wie gesagt, nicht wirklich so in der Webansicht verwendet, die Pixeldichte hat die Werte geändert.

Daher wollte ich wissen, wie viele Pixel in der Breite sowohl in DHD als auch in SGS und dann in SGN erkannt wurden:

window.innerWidth

Bei den 480px-Handys hatte ich eigentlich 320px erkannt. Für das 800px Galaxy Note hatte ich nur 500px erkannt. Als ich das sah, habe ich meine Medienabfragen angepasst und es hat funktioniert.

7
jcbee

hier sind ein paar Dinge, die ich in meiner Erfahrung gefunden habe und die möglicherweise auf die Erkennung mit höherer Auflösung zurückzuführen sind. Mein Lieblingstesttelefon ist 320px (maximale Gerätebreite) x 480px (maximale Gerätebreite) im Hochformat. Aber je nachdem welchen mobilen Browser ich benutze, kann die maximale Breite bis zu 850px betragen !! Opera Mobile verwendet standardmäßig 850px als maximale Breite, obwohl es sich um ein Gerät mit einer maximalen Gerätebreite von 320px handelt. Besser noch; Der in diesem Gerät integrierte Andriod-Browser hat eine maximale Standardbreite von 550px. Dolphin verwendet standardmäßig die gleiche maximale Breite von 550px. Normalerweise teste ich nicht mit FireFox Mobile, aber da es sich um einen Gecko-basierten Browser wie Opera handelt, wäre ich nicht überrascht, wenn er in den 850px-Bereich fällt. Kennt oder testet es jemand?

bei der Adressierung von 320 x 480 Geräten verwende ich normalerweise eine Medienabfrage mit drei Bedingungen.

@media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

außerdem platziere ich dieses Meta-Tag in der Regel in meinem Header auf der Hauptseite

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

Das Folgende schien mir nicht zu helfen, als ich etwas mehr recherchierte und die obigen Informationen herausfand. <meta name="viewport" content="width=device-width" /> Hoffe es hilft jemand anderem.

2
kevinB

Da Mobiltelefone ein ständig wachsendes schwarzes Loch der Auflösungsverwirrung sind, müssen Sie ihnen sagen, dass sie sich identifizieren sollen. Sie müssen auch die Skalierung auf 1 setzen und die Benutzerskalierung entfernen. Wenn ich das in meinen Code schreibe, ist es der Trick für mich.

Fügen Sie dieses Snippet in den Kopf Ihres HTML-Codes in der Zeile unter dem Tag <meta character...> ein.

<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
1
richardsonae
  1. Konvertieren Sie alle px-Werte in em-Werte, indem Sie sie durch 16 teilen (16px wird zu 1 em). Dadurch wird sichergestellt, dass die Größe unabhängig von der verwendeten Schriftart das richtige Verhältnis aufweist.
  2. Fügen Sie Ihrem Meta-Ansichtsfenster Folgendes hinzu: target-densitydpi=medium-dpi. Dies stellt sicher, dass sich die em- Größen auf allen (den meisten?) Geräten gleich verhalten
0
ToBe_HH