Ha a mai telefonok 1000és 2000px felbontásúak, pl egy s23ultra 3088px x 1440px , akkor reszponzív weboldalnál a mobil media query-t miért 360-480px közé lőni?

Mert van három dolog, a CSS "px" mint mértékegység, a CSS "mm", "cm", "inch" mint hosszmértékek ( [link] ), és a PPI.

Ha azt akarjuk elérni, hogy a CSS-féle "inch" mindig pontosan (vagy legalább megközelítőleg) egy valódi inch-nek feleljen meg, ugyanakkor egy inch mindig adott számú pixelből álljon elő, akkor elég nagy bajban lennénk, mert nyilván egy 720x1520 felbontású kijelzőn és egy 3088x1440 felbontású kijelzőn eltérő mennyiségű pixel fog felépíteni egy inch-et. Ezért az okosok kitalálták azt, hogy 1 inch mindig legyen 96 pixel, mint ahogy a fentebb linkelt oldalon látszik is látszik: 1in = 2.54cm = 96px

És ezt csak úgy tudja az eszköz biztosítani, ha nem valódi pixeleket, hanem ún. referencia pixeleket használ. Ha a fentebb linkelt oldalon lejjebb tekersz, ott van angolul a referencia pixel definíciója, és ez a kép: [link]

Ezen a képen jól látszik, hogy egyetlen referencia pixel egy vagy több "device pixel"-nek felel meg. A device pixel az a valódi pixel, amit a kijelző ténylegesen egy pixelként jelenít meg ("A device pixel is the smallest unit of area on the device output capable of displaying its full range of colors").

Ez az oka annak, hogy az eszköz képernyőjének fizikai felbontása és a CSS által használt "px" egység nem egyezik meg.

Itt látszik például, hogy az iPhone 11 PRO kijelzője 1125x2436px, miközben a viewportja 375x812px:

[link]

Illetve ott van még a viewport beállítás is:

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

Ez állítja be azt, hogy a weboldalad megjelenítési területe (tehát az a nézetablak, amiben az oldal megjelenik), pontosabban annak szélessége megeggyezzen a képernyő szélességével. Ha nem adnád meg, akkor ez történne: [link]

Azaz a weboldalad megjelenítési ablaka szélesebb vagy keskenyebb lenne, mint a kijelző.

Példának okáért, itt a gyakorikerdesek.hu asztali gépről nézve, de mobilnézetben úgy, hogy a "width=device-width" van beállítva:

[link]

És ugyanez, ha "width=1800px" van beállítva:

[link]

Mivel a képeken látszik, egy 384 pixel szélességű eszközzel emuláltam az oldal megjelenését, ezért ha átírom úgy, hogy "width=384px", akkor megint csak jól jelenik meg:

[link]

Lehet találni egyébként régebbi és újabb cikkeket a témában:

[link]

[link]

[link]

Mert az eszköznek a Dot Perc Inch értékét úgy állítják be, hogy mobilon jóval sűrűbb képpontok esetén is egy olvasható értéket kapjunk.

Gondolj bele, ha 4K felbontású 6" -os kijelzőn a mostani betű méret 1/16 -oda lenne.

Viszont a nagyobb felbontásnak köszönhetően, a vektoros vagy részletesebb képek jobb - szebb megjelenést biztosít.

(Google kereső rendszere valamiért azt nem szereti, hogy ha 4× nagyobb - részletesebb képet használunk, pedig sokkal szebb megjelenés lehetséges úgy mobilon.)