𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵
I used to design websites by checking screen size.
I thought I needed to detect if a user used a phone or a tablet. I tried checking if the screen height was larger than the width. This only checked orientation. It did not check the device type.
I found a better way. Use media queries to check how people interact with your site.
The (hover) query checks if a device can hover over elements.
Use @media (hover: hover) for devices with a mouse or trackpad. Use @media (hover: none) for touch-only devices like phones.
This helps you fix hover issues on mobile. On a phone, hover rules often fail or act strange. You can write code to show buttons on mobile but hide them on desktop until a user hovers.
Tailwind makes this easy with arbitrary variants:
You can also check pointer precision with (pointer).
• Mouse: hover and fine pointer • Trackpad: hover and fine pointer • Finger touch: no hover and coarse pointer • Stylus: usually hover and fine pointer
If you want to check every input device instead of just the main one, use these:
• @media (any-hover: hover) • @media (any-pointer: fine)
A tablet with a mouse attached might report hover: none for its primary input. But it will report any-hover: hover because a mouse is present.
Stop designing only for screen sizes. Start designing for how users touch or click your interface.