If you are looking to make a universal CSS rule for all mobile devices then use the following CSS media query:-
|
@media (pointer:coarse) { |
|
/* custom css for "touch targets" */ |
|
} |
|
|
|
@media (hover: none) { |
|
/* custom css for devices where the primary input mechanism cannot hover at all or cannot conveniently hover |
|
} |
|
|
|
@media (hover:none), (hover:on-demand) { |
|
/* custom css for "touch targets" */ |
|
} |
|
|
|
/* credit: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/29307143 */ |
We find that the first media query works best in most cases.
About the Author
Glenn
A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.
