@media screen dziwne zachowanie przy min-width: 980px

Question

Witam,

nie rozumiem chyba do końca jak działa... @media screen and (min-width: XXXpx)

Myślałem, że kod zawarty wewnątrz tej reguły CSS wykona się, gdy szerokość ekranu będzie większa niż XXX pikseli. Niestety moje dzisiejsze próby zrozumienia tego okazały się klęską.

Chciałbym, aby ktoś w fajny, rzeczowy sposób wytłumaczył mi pewien ewenement związany z tą regułą CSS:

min-width: 980px;

min-width: 981px;

O co tutaj do licha ciężkiego chodzi?

Zmiana rozmiaru okna przeglądarki działa bezbłędnie i następuje zmiana koloru przy 980px. Ale ten kod działa zupełnie inaczej na telefonie (manipulując rozmiarem ekranu telefonu w emulatorze w Chrome). W zasadzie, to gdy min-with jest poniżej 980px to nie działa w ogóle! Strona nie reaguje na zmianę rozmiaru. Gdy min-width wynosi 981px albo 1000px albo więcej (powyżej 980) to break-point działa pięknie. To jakaś magiczna liczba 980px?

Podsumowując:

1. Poniżej 980px przeglądarka w telefonie się obraża i break-point nie reaguje wcale. Skąd to zachowanie, co pokazałem na zdjęciach?
2. Czy stosowanie pikseli do ustalania break-pointów, to dobry pomysł? Zrobiłem stronkę, w której menu nawigacyjne się "zwija", gdy "width" będzie <= 800px i problem w tym, że ekran mojego telefonu ma 1920x1080 i strona wygląda w zasadzie jak na desktopie (bo szerokość to 1080). Jak zrobić taki break-point, żeby strona ogarniała, że jest na komórce, w pionie? (zwiększenie limitu px chyba odpada, bo pojawiają się już telefony 4K z szerokością ekranu w pionie ponad 2000 pikseli(?)).
3. Kombinowałem z min-device-width i działało wyśmienicie, tylko w Internecie piszą, że należy tego unikać... ech... webmasterzy, uwielbiam was :-D

 Pozdrawiam serdecznie :-)

Answer 1

Po pierwsze: dawaj kod, nie obrazki kodu…

Po drugie: przeglądarki mobilne domyślnie zawsze skalują dopóki nie poda im się meta[name=viewport]. Bez tego metatagu strona jest zawsze traktowana jako desktopowa i skalowana.

Comments

Nie wiedziałem o tym tagu.

A kod dałem w obrazku z rezultatem obok, bo uznalem, że jest tak banalny, że jak ktoś ogarnia temat, to tylko rzuci okiem o co chodzi, zamiast czytać moje opisy sytuacji...

Dzięki za pomoc ;-)