𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵
நான் திரையின் அளவை (screen size) சரிபார்ப்பதன் மூலம் இணையதளங்களை வடிவமைத்து வந்தேன்.
ஒரு பயனர் போன் அல்லது டேப்லெட்டைப் பயன்படுத்துகிறாரா என்பதைக் கண்டறிய வேண்டும் என்று நான் நினைத்தேன். திரையின் உயரமானது அதன் அகலத்தை விட அதிகமாக உள்ளதா என்று சரிபார்க்க முயன்றேன். இது திரையின் திசையை (orientation) மட்டுமே சரிபார்க்கும். இது சாதனத்தின் வகையை (device type) சரிபார்க்காது.
நான் ஒரு சிறந்த வழியைக் கண்டறிந்தேன். மக்கள் உங்கள் தளத்துடன் எவ்வாறு தொடர்பு கொள்கிறார்கள் (interact) என்பதைச் சரிபார்க்க media queries-ஐப் பயன்படுத்துங்கள்.
(hover) query என்பது ஒரு சாதனம் கூறுகளின் (elements) மீது கர்சரை நகர்த்த (hover) முடியுமா என்பதைச் சரிபார்க்கிறது.
மவுஸ் (mouse) அல்லது டிராக்பேட் (trackpad) கொண்ட சாதனங்களுக்கு @media (hover: hover) என்பதைப் பயன்படுத்தவும்.
போன்கள் போன்ற தொடுதிரை (touch-only) சாதனங்களுக்கு @media (hover: none) என்பதைப் பயன்படுத்தவும்.
இது மொபைலில் hover தொடர்பான சிக்கல்களைச் சரிசெய்ய உதவுகிறது. போனில், hover விதிகள் பெரும்பாலும் தோல்வியடையும் அல்லது விசித்திரமாகச் செயல்படும். மொபைலில் பட்டன்களைக் காட்டுவதற்கும், டெஸ்க்டாப்பில் பயனர் hover செய்யும் வரை அவற்றை மறைத்து வைப்பதற்கும் நீங்கள் குறியீட்டை (code) எழுதலாம்.
Tailwind இதை arbitrary variants மூலம் எளிதாக்குகிறது:
நீங்கள் (pointer) மூலம் பாயிண்டரின் துல்லியத்தையும் (pointer precision) சரிபார்க்கலாம்.
• Mouse: hover மற்றும் fine pointer • Trackpad: hover மற்றும் fine pointer • Finger touch: no hover மற்றும் coarse pointer • Stylus: பொதுவாக hover மற்றும் fine pointer
முதன்மை சாதனத்திற்குப் பதிலாக ஒவ்வொரு உள்ளீட்டுச் சாதனத்தையும் (input device) சரிபார்க்க விரும்பினால், இவற்றைப் பயன்படுத்தவும்:
• @media (any-hover: hover) • @media (any-pointer: fine)
மவுஸ் இணைக்கப்பட்ட ஒரு டேப்லெட் அதன் முதன்மை உள்ளீட்டிற்கு (primary input) hover: none என்று தெரிவிக்கலாம். ஆனால் மவுஸ் இருப்பதால் அது any-hover: hover என்று தெரிவிக்கும்.
திரையின் அளவுகளுக்காக மட்டும் வடிவமைப்பதை நிறுத்துங்கள். பயனர்கள் உங்கள் இடைமுகத்தை (interface) எவ்வாறு தொடுகிறார்கள் அல்லது கிளிக் செய்கிறார்கள் என்பதற்கேற்ப வடிவமைக்கத் தொடங்குங்கள்.