𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵
હું સ્ક્રીન સાઈઝ તપાસીને વેબસાઇટ્સ ડિઝાઇન કરતો હતો.
મને લાગતું હતું કે મારે એ જાણવાની જરૂર છે કે વપરાશકર્તા ફોન વાપરે છે કે ટેબ્લેટ. મેં સ્ક્રીનની ઊંચાઈ તેની પહોળાઈ કરતા વધારે છે કે નહીં તે તપાસવાનો પ્રયાસ કર્યો. આ માત્ર ઓરિએન્ટેશન (orientation) તપાસતું હતું. તે ડિવાઇસનો પ્રકાર તપાસતું નહોતું.
મને એક વધુ સારો રસ્તો મળ્યો. લોકો તમારી સાઇટ સાથે કેવી રીતે ઇન્ટરેક્ટ (interact) કરે છે તે તપાસવા માટે media queries નો ઉપયોગ કરો.
(hover) ક્વેરી તપાસે છે કે કોઈ ડિવાઇસ એલિમેન્ટ્સ પર હોવર (hover) કરી શકે છે કે નહીં.
માઉસ અથવા ટ્રેકપેડ ધરાવતા ડિવાઇસ માટે @media (hover: hover) નો ઉપયોગ કરો. ફોન જેવા ફક્ત ટચ (touch) ધરાવતા ડિવાઇસ માટે @media (hover: none) નો ઉપયોગ કરો.
આ તમને મોબાઈલ પર hover ની સમસ્યાઓ સુધારવામાં મદદ કરે છે. ફોનમાં, hover નિયમો ઘણીવાર નિષ્ફળ જાય છે અથવા વિચિત્ર રીતે કામ કરે છે. તમે મોબાઈલ પર બટનો બતાવવા માટે પરંતુ ડેસ્કટોપ પર વપરાશકર્તા હોવર કરે ત્યાં સુધી તેને છુપાવવા માટે કોડ લખી શકો છો.
Tailwind આને arbitrary variants સાથે સરળ બનાવે છે:
તમે (pointer) સાથે પોઇન્ટરની ચોકસાઈ (precision) પણ તપાસી શકો છો.
• Mouse: hover અને fine pointer • Trackpad: hover અને fine pointer • Finger touch: no hover અને coarse pointer • Stylus: સામાન્ય રીતે hover અને fine pointer
જો તમે ફક્ત મુખ્ય ડિવાઇસને બદલે દરેક ઇનપુટ ડિવાઇસ તપાસવા માંગતા હોવ, તો આનો ઉપયોગ કરો:
• @media (any-hover: hover) • @media (any-pointer: fine)
માઉસ સાથે જોડાયેલ ટેબ્લેટ તેના પ્રાથમિક ઇનપુટ માટે hover: none રિપોર્ટ કરી શકે છે. પરંતુ તે any-hover: hover રિપોર્ટ કરશે કારણ કે તેમાં માઉસ હાજર છે.
ફક્ત સ્ક્રીન સાઈઝ માટે ડિઝાઇન કરવાનું બંધ કરો. વપરાશકર્તાઓ તમારા ઇન્ટરફેસને કેવી રીતે સ્પર્શે છે અથવા ક્લિક કરે છે તેના માટે ડિઝાઇન કરવાનું શરૂ કરો.