Только первые два медиа-запроса работают в CSS. Отдых игнорируется

Question

Я уверен, что есть очень простое решение моей проблемы.

У меня есть запросы на дерево, но только первые две работы. 800px один просто игнорируется при просмотре на телефоне.

div { 
 
    color: yellow; 
 
    font-size: 50px; 
 
} 
 

 
@media (max-width: 1200px) { 
 
    div { 
 
    color: red; 
 
    } 
 
} 
 

 
@media (max-width: 1000px) { 
 
    div { 
 
    color: green; 
 
    } 
 
} 
 

 
@media (max-width: 800px) { 
 
    div { 
 
    color: purple; 
 
    } 
 
}

<div>Hello</div>

Answer 1

Добавить мета-тег в HTML с начальным масштаба равным 1.

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

Answer 2

Поскольку код отлично работает в на рабочем столе, если только изменение размера окна браузера, но не работает с использованием хром для эмуляции размера экрана - так что это может быть проблемой с эмулятором. Вам нужно будет загрузить страницу на мобильное устройство или попробовать несколько разных эмуляторов.