CSS-Medienabfragen für mobile Geräte, die nicht funktionieren

Question

Ich arbeite mit Medienabfragen, um meine Website reaktionsfähiger zu machen. Die Medienabfragen funktionieren auf meinem PC (Chrome) jedoch einwandfrei, aber beim Betrachten auf einem mobilen Gerät (iPad und iPhone) scheinen die Medienabfragen nicht wirksam zu sein. Ich habe das Ansichtsfenster-Tag im Kopf, aber ich vermute, ich bin fehlt etwas anderes ....

CSS

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText { 
     color: pink; 
    } 
} 
@media (min-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText { 
     color: blue; 
    } 
} 
@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText { 
     color: red; 
    } 
} 
@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText { 
     color: yellow; 
    } 
} 
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText { 
     color: green; 
    } 
} 
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText { 
     color: purple; 
    } 
} 

HTML

<meta charset=utf-8> 
<meta http-equiv=X-UA-Compatible content="IE=edge"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

<div id="mainText"> 
    <h1>Text</h1> 
    <h2>Text</h2> 
</div> 

Answer 1

Es scheint zu sein, Filter in Ihrem css

filter: brightness(1%); 

Jetzt, da Sie kein Herstellerpräfix für Webkit hinzufügen, entscheidet sich chrome gerade dafür, es zu ignorieren. Sie können diese Regel entweder entfernen oder Folgendes zu Ihrem CSS hinzufügen.

-webkit-filter: brightness(1%); 
filter: brightness(1%); 

Prost und Happy Coding!

Answer 2

Wie Ihre Anfragen selbst etwas wie das versuchen zwingende könnte min und max Breiten für Ihre Fragen angeben, die das Debuggen

@media (max-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText { 
     color: pink; 
    } 
} 
@media (min-width:321px) and (max-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText { 
     color: blue; 
    } 
} 
@media (min-width:482px) and (max-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText { 
     color: red; 
    } 
} 
@media (min-width:642px) and (max-width:1024px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText { 
     color: yellow; 
    } 
} 
@media (min-width:1025px) and (max-width:1280px){ 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText { 
     color: green; 
    } 
} 
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText { 
     color: purple; 
    } 
}