𝗗𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗗𝗶𝗲 𝗠𝗲𝗷𝗻 𝗢𝗻𝘁𝘄𝗲𝗲𝗽𝘀𝗯𝗲𝗻𝗮𝗱𝗲𝗿𝗶𝗻𝗴 𝗩𝗲𝗿𝗮𝗮𝗻𝗱𝗲𝗿𝗱𝗲
Vroeger ontwierp ik websites door naar de schermgrootte te kijken.
Ik dacht dat ik moest detecteren of een gebruiker een telefoon of een tablet gebruikte. Ik probeerde te controleren of de schermhoogte groter was dan de breedte. Dit controleerde alleen de oriëntatie. Het controleerde niet het type apparaat.
Ik heb een betere manier gevonden. Gebruik media queries om te controleren hoe mensen met je site interageren.
De (hover) query controleert of een apparaat over elementen kan zweven.
Gebruik @media (hover: hover) voor apparaten met een muis of trackpad.
Gebruik @media (hover: none) voor apparaten die alleen touch ondersteunen, zoals telefoons.
Dit helpt je om hover-problemen op mobiel op te lossen. Op een telefoon werken hover-regels vaak niet goed of gedragen ze zich vreemd. Je kunt code schrijven om knoppen op mobiel te tonen, maar ze op desktop te verbergen totdat een gebruiker eroverheen zweeft.
Tailwind maakt dit eenvoudig met arbitrary variants:
Je kunt ook de precisie van de aanwijzer controleren met (pointer).
• Muis: hover en fine pointer • Trackpad: hover en fine pointer • Vingertouch: geen hover en coarse pointer • Stylus: meestal hover en fine pointer
Als je elk invoerapparaat wilt controleren in plaats van alleen het hoofdapparaat, gebruik dan deze:
• @media (any-hover: hover) • @media (any-pointer: fine)
Een tablet met een aangesloten muis rapporteert mogelijk hover: none voor de primaire invoer. Maar het zal any-hover: hover rapporteren omdat er een muis aanwezig is.
Stop met ontwerpen uitsluitend op basis van schermgroottes. Begin te ontwerpen op basis van hoe gebruikers je interface aanraken of aanklikken.