Dlaczego tak
Bez znacznika meta viewport przeglądarki mobilne renderują stronę na wirtualnym ekranie o szerokości ok. 980 px i pomniejszają wynik, więc warunek max-width: 600px nigdy nie jest spełniony. Ustawienie width=device-width sprawia, że szerokość widoku odpowiada szerokości urządzenia, a zapytania o media zaczynają działać. Kodowanie znaków, ikona i opis strony nie wpływają na szerokość widoku.