Mozilla Media Query mobile Ansicht

Question

Hallo Ich versuche, meine Website reaktionsfähig zu machen. Jetzt habe ich eine Medienabfrage, die eine bestimmte Bildschirmgröße von Geräten behandelt, aber ein anderes Styling beim Betrachten über das Internet. Es funktioniert gut in Chrom, Safari und Oper. Aber wenn ich in Mozilla versuche, scheint es, dass meine Medienabfrage ausgeführt wird, obwohl ich über den Desktop darauf zugreife. Gibt es etwas, das ich vermisse? Im Folgenden finden Sie meine Medienabfrage

.my-target-class { 
    display: inline; 
} 

@media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (min-device-height: 300px) and (max-device-height: 750px){ 
     .my-target-class { 
      display: block; 
     } 
} 

Wie Sie bin ich ein Targeting cla und Anzeigeänderung ist zu sehen, wenn seine über Handy betrachtet wird. Aber beim Betrachten auf Mozilla läuft die @ media Bildschirmabfrage und wendet ng display: block auf die Klasse an. Irgendeine Idee oder Lösung dafür? Würde schätzen, wenn Erklärung auf, warum sein Verhalten wie dieses

Wie Sie auf dem unteren rechten Teil des Screenshots sehen können, ist es das Anwenden des css an, das für Mobile bestimmt ist. Obwohl ich es über einen Desktop-Browser einbeziehe. Ich gehe davon aus, dass wenn ich @media only screen platziere, dies nur bei der Anzeige auf dem Handy angewendet wird. Aber es scheint firefox verhält sich anders

Answer 1

Nicht außerhalb Ihres Codes. Sie haben auch auf Ihre Bildschirmgröße für Desktop wickeln wie diese

@media screen and (min-device-width: 300px) and (max-device-width: 800px){ 
    .my-target-class { 
     display: block; 
    } 
} 
@media screen and (min-device-width: 801px) { 
    .my-target-class { 
     display: inline; 
    } 
}