𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝘆𝗮 𝗖𝗦𝗦 𝗜𝗹𝗶𝘆𝗼𝗯𝗮𝗱𝗶𝗹𝗶𝘀𝗵𝗮 𝗠𝘁𝗮𝘇𝗮𝗺𝗼 𝗪𝗮𝗻𝗴𝘂 𝘄𝗮 𝗨𝘀𝗮𝗻𝗶𝗳𝘂
Nilikuwa nikisanifu tovuti kwa kuangalia ukubwa wa skrini.
Nilidhani nilipaswa kutambua ikiwa mtumiaji anatumia simu au tablet. Nilijaribu kuangalia ikiwa urefu wa skrini ulikuwa mkubwa kuliko upana. Hii ilichunguza mwelekeo (orientation) pekee. Haikuchunguza aina ya kifaa.
Nilipata njia bora zaidi. Tumia media queries kuangalia jinsi watu wanavyoingiliana na tovuti yako.
Swali la (hover) huchunguza ikiwa kifaa kinaweza kuweka kishale (hover) juu ya vipengele.
Tumia @media (hover: hover) kwa vifaa vyenye mouse au trackpad.
Tumia @media (hover: none) kwa vifaa vinavyotumia mguso pekee kama simu.
Hii inakusaidia kurekebisha matatizo ya hover kwenye simu. Kwenye simu, sheria za hover mara nyingi hushindwa au hufanya kazi kwa njia isiyo ya kawaida. Unaweza kuandika kodi ya kuonyesha vitufe kwenye simu lakini kuvificha kwenye desktop hadi mtumiaji anapoweka kishale juu yake (hover).
Tailwind inafanya hili kuwa rahisi kwa kutumia arbitrary variants:
Pia unaweza kuangalia usahihi wa kishale (pointer precision) kwa kutumia (pointer).
• Mouse: hover na fine pointer • Trackpad: hover na fine pointer • Mguso wa kidole: hakuna hover na coarse pointer • Stylus: kwa kawaida ni hover na fine pointer
Ikiwa unataka kuangalia kila kifaa cha kuingizia data (input device) badala ya kile kikuu pekee, tumia hizi:
• @media (any-hover: hover) • @media (any-pointer: fine)
Tablet iliyounganishwa na mouse inaweza kuripoti hover: none kwa kifaa chake kikuu cha kuingizia data. Lakini itaripoti any-hover: hover kwa sababu mouse ipo.
Acha kusanifu kwa ajili ya ukubwa wa skrini pekee. Anza kusanifu kulingana na jinsi watumiaji wanavyogusa au kubofya kiolesura (interface) chako.