2013-06-27 4 views
24

Ich versuche, das funktioniert zu bekommen, aber irgendwie funktioniert es nicht in Mobile. Wenn ich das Chrome-Werkzeug verwende, um die Bildschirmgröße zu überschreiben, funktioniert es gut. Ich bin mir nicht sicher, was ich falsch mache. bitte helfen@media Abfrage funktioniert nicht in Mobile. Funktioniert gut in Chrome

@media screen and (min-device-width : 320px) and (max-device-width : 480px) { 
      .container .backgroundImage { display: none; } 
} 

enter image description here

Es ist ein Hintergrundbild, wenn in Browser angezeigt. si möchte das Bild entfernen, wenn in mobilen gesehen aber es ist nicht irgendwie arbeiten .. bitte

=============

UNTERSUCHUNGS IPhone 3G helfen, 4, 5, Android Galaxy Nexus

+2

Je nach iPhone-Version kann die maximale Gerätebreite breiter als 480 sein. Probieren Sie '900' oder etwas Dummes aus, um sicherzustellen, dass sie funktionieren. auch dort sollte ein 'und 'zwischen den 2 Regelsätzen – Andy

+0

ja sein .. versuch mich ... –

+0

funktioniert nicht .... ist es möglich, dass das Gerät, das ich am Testen bin, hat rina Display und das ist, warum es nicht funktioniert. –

Antwort

68

@Andy ist richtig, überprüfen Sie doppelt Ihre device-widths, oder Sie könnten immer einfach min-width verwenden, so dass Sie nicht jede Gerätebreite kennen müssen.

Unabhängig davon, ob Sie ein viewport Tag haben, wie <meta name="viewport" content="width=device-width,initial-scale=1.0">.

+3

Kumpel ... Sie rocken .... Ich vermisste Viewport-Tag in –

+1

Ich habe das Meta-Tag in den Kopf aufgenommen. Funktioniert immer noch nicht für mich. –

+0

Vielen Dank dafür :) – DannyW86

10

Fantastisch - auch die Ansichtsfenster vergessen! Fot alle: Fügen Sie einfach

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

im Kopf

0

Ich weiß, dass dies eine alte Post, aber ich hatte vor kurzem ein Problem wie dieses. Am Ende habe ich es behoben, indem ich die CSS-Medienabfrage aus dem CSS-Haupt-Stylesheet entfernt habe und stattdessen die spezifischen Anforderungen für Mobilgeräte in den HTML-Style-Abschnitt eingegeben habe. Ich weiß nicht, warum es funktioniert hat, aber es hat funktioniert.