𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵
സ്ക്രീൻ സൈസ് നോക്കിയാണ് ഞാൻ വെബ്സൈറ്റുകൾ ഡിസൈൻ ചെയ്തിരുന്നത്.
ഉപയോക്താവ് ഫോണാണോ അതോ ടാബ്ലെറ്റാണോ ഉപയോഗിക്കുന്നത് എന്ന് കണ്ടെത്തേണ്ടതുണ്ടെന്ന് ഞാൻ കരുതി. സ്ക്രീനിന്റെ ഉയരം വീതിയേക്കാൾ കൂടുതലാണോ എന്ന് പരിശോധിക്കാൻ ഞാൻ ശ്രമിച്ചു. ഇത് ഓറിയന്റേഷൻ (orientation) മാത്രമേ പരിശോധിച്ചുള്ളൂ. ഇത് ഉപകരണത്തിന്റെ തരം (device type) പരിശോധിച്ചില്ല.
ഇതിലും മികച്ചൊരു വഴി ഞാൻ കണ്ടെത്തി. ആളുകൾ നിങ്ങളുടെ സൈറ്റുമായി എങ്ങനെ ഇടപഴകുന്നു (interact ചെയ്യുന്നു) എന്ന് പരിശോധിക്കാൻ മീഡിയ ക്വറികൾ ഉപയോഗിക്കുക.
ഒരു ഉപകരണം എലമെന്റുകൾക്ക് മുകളിൽ ഹോവർ (hover) ചെയ്യാൻ കഴിയുമോ എന്ന് (hover) ക്വറി പരിശോധിക്കുന്നു.
മൗസ് അല്ലെങ്കിൽ ട്രാക്ക്പാഡ് ഉള്ള ഉപകരണങ്ങൾക്ക് @media (hover: hover) ഉപയോഗിക്കുക. ഫോണുകൾ പോലുള്ള ടച്ച്-ഒൺലി (touch-only) ഉപകരണങ്ങൾക്ക് @media (hover: none) ഉപയോഗിക്കുക.
മൊബൈലിലെ ഹോവർ പ്രശ്നങ്ങൾ പരിഹരിക്കാൻ ഇത് നിങ്ങളെ സഹായിക്കുന്നു. ഫോണുകളിൽ ഹോവർ നിയമങ്ങൾ പലപ്പോഴും പരാജയപ്പെടുകയോ വിചിത്രമായി പ്രവർത്തിക്കുകയോ ചെയ്യും. മൊബൈലിൽ ബട്ടണുകൾ കാണിക്കാനും ഡെസ്ക്ടോപ്പിൽ ഉപയോക്താവ് ഹോവർ ചെയ്യുന്നത് വരെ അവ മറച്ചുവെക്കാനും നിങ്ങൾക്ക് കോഡ് എഴുതാം.
Tailwind ഇതിനെ arbitrary variants ഉപയോഗിച്ച് എളുപ്പമാക്കുന്നു:
(pointer) ഉപയോഗിച്ച് നിങ്ങൾക്ക് പോയിന്റർ പ്രിസിഷൻ (pointer precision) പരിശോധിക്കാനും കഴിയും.
• Mouse: hover and fine pointer • Trackpad: hover and fine pointer • Finger touch: no hover and coarse pointer • Stylus: usually hover and fine pointer
പ്രധാനപ്പെട്ട ഉപകരണം മാത്രമല്ല, എല്ലാ ഇൻപുട്ട് ഉപകരണങ്ങളും പരിശോധിക്കണമെന്നുണ്ടെങ്കിൽ ഇവ ഉപയോഗിക്കുക:
• @media (any-hover: hover) • @media (any-pointer: fine)
മൗസ് ഘടിപ്പിച്ച ഒരു ടാബ്ലെറ്റ് അതിന്റെ പ്രൈമറി ഇൻപുട്ടിനായി hover: none എന്ന് റിപ്പോർട്ട് ചെയ്തേക്കാം. എന്നാൽ ഒരു മൗസ് ഉള്ളതുകൊണ്ട് അത് any-hover: hover എന്ന് റിപ്പോർട്ട് ചെയ്യും.
സ്ക്രീൻ സൈസുകൾക്ക് വേണ്ടി മാത്രം ഡിസൈൻ ചെയ്യുന്നത് നിർത്തുക. ഉപയോക്താക്കൾ നിങ്ങളുടെ ഇന്റർഫേസ് എങ്ങനെ സ്പർശിക്കുന്നു അല്ലെങ്കിൽ ക്ലിക്ക് ചെയ്യുന്നു എന്നതിനെ അടിസ്ഥാനമാക്കി ഡിസൈൻ ചെയ്യാൻ തുടങ്ങുക.