Запросы CSS Media для мобильных устройств не работают

Question

Я работаю со средствами массовой информации, чтобы начать делать мой сайт более отзывчивым. Тем не менее, медиа-запросы отлично работают на моем ПК (Chrome), но при просмотре на мобильном устройстве (iPad и iPhone) медиа-запросы не вступают в силу. У меня есть видовых тег в голове, но я предполагаю, что я что-то еще не хватает ....

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

Там, кажется, фильтр в вашем css

filter: brightness(1%); 

Теперь, поскольку вы не добавляете префиксы поставщиков для webkit, хром просто решил проигнорировать его. Вы можете либо удалить это правило, либо добавить следующее в свой css.

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

Приветствия и счастливое кодирование!

Answer 2

Как ваши запросы могут переопределение себя попробовать что-то вроде этого указать минимальные и максимальные ширины для запросов, которые всегда 1px меньше/больше, чем предыдущая

@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; 
    } 
}