webentwicklung-frage-antwort-db.com.de

@media-Abfrage funktioniert nicht auf mobilen Geräten. Funktioniert gut in Chrome

Ich versuche, das zum Laufen zu bringen, aber irgendwie funktioniert es nicht in Mobile. Wenn ich das Chrome-Tool zum Überschreiben der Bildschirmgröße verwende, funktioniert es einwandfrei. Ich bin mir nicht sicher, was ich falsch mache. bitte helfen

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

enter image description here

Bei Anzeige im Browser ist ein Hintergrundbild vorhanden. s Ich möchte dieses Bild entfernen, wenn es in Mobile angezeigt wird, ABER es funktioniert nicht irgendwie .. bitte helfen

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

TESTEN AUF IPhone 3G, 4, 5, Android Galaxy Nexus

28
patel.milanb

@Andy ist richtig, überprüfen Sie Ihren device-widths noch einmal, oder verwenden Sie min-width, damit Sie nicht jede Gerätebreite kennen müssen. 

Stellen Sie trotzdem sicher, dass Sie ein viewport-Tag wie <meta name="viewport" content="width=device-width,initial-scale=1.0"> haben.

92
Adam Simpson

Fantastisch - habe auch den Viewport vergessen! Fot all: Einfach hinzufügen

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

in deinem Kopf

15
romedius33

Ich weiß, dass dies ein alter Beitrag ist, aber ich hatte kürzlich ein Problem wie dieses. Am Ende habe ich das Problem behoben, indem ich die CSS-Medienabfrage aus dem Haupt-CSS-Stylesheet entfernt und stattdessen die spezifischen Anforderungen für Mobile im HTML-Stilabschnitt eingegeben habe. Ich weiß nicht, warum es funktioniert hat, aber es tat es.

1
Pops Jones