CSS: Kako prepoznamo napravo na dotik?

Razvoj tehnologij je iz leta v leto hitrejši. Če smo običajno mobilne naprave oz. manjše zaslone v CSSju zaznali s pomočjo @media screen poizvedb lahko sedaj slednje zaznamo s pomočjo pointerja ali hover stanja.

Nova povpraševanja, kot so @media (pointer: fine) ali @media (pointer: coarse) nam omogočajo, da lahko določene dele strani ali aplikacije prilagajamo napravam, ki jih uporabniki uporabljajo. Bolj natančne naprave imajo npr, klasično obliko, manj natančne naprave pa bolj prilagojeno obliko, ki omogoča lažje navigiranje oz. uporabo.

Povpraševanja @media (hover: hover) ali @media (hover: none) pa nam povejo ali ima uporabnikova naprava vmesnik, ki lahko lebdi nad elementi ali ne, kot npr miška.

Z malo domišljije pa lahko določena povpraševanja združujemo in dobimo še bolj natančno ciljanje določenih naprav. Primer:

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
/* ... */}

/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
/* ... */}

/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
/* ... */}

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
/* ... */}

Pred uporabo vedno preverite podporo naprednejšim značkam. Značka je trenutno podprta v vseh večjih brskalnikih razen IE brskalniku, kar pa za mobilne naprave ni ovira.

Dodatne branje:

Oznake: @mediaCSSmedia queries

Komentiraj


*