CSS Media Query ที่เปลี่ยนแนวทางการออกแบบของผม
เมื่อก่อนผมออกแบบเว็บไซต์โดยการเช็กขนาดหน้าจอ
ผมเคยคิดว่าต้องตรวจจับว่าผู้ใช้ใช้โทรศัพท์หรือแท็บเล็ต ผมพยายามเช็กว่าความสูงของหน้าจอมากกว่าความกว้างหรือไม่ แต่นั่นเป็นการเช็กแค่การวางแนว (orientation) เท่านั้น ไม่ได้เช็กประเภทของอุปกรณ์
ผมพบวิธีที่ดีกว่า นั่นคือการใช้ media queries เพื่อเช็กว่าผู้คนมีปฏิสัมพันธ์กับเว็บไซต์ของคุณอย่างไร
query แบบ (hover) จะใช้เช็กว่าอุปกรณ์นั้นสามารถวางเมาส์เหนือองค์ประกอบต่างๆ (hover) ได้หรือไม่
ใช้ @media (hover: hover) สำหรับอุปกรณ์ที่มีเมาส์หรือ trackpad
ใช้ @media (hover: none) สำหรับอุปกรณ์ที่ใช้การสัมผัสเพียงอย่างเดียว เช่น โทรศัพท์
สิ่งนี้จะช่วยให้คุณแก้ปัญหาเรื่อง hover บนมือถือได้ เพราะบนโทรศัพท์ กฎของ hover มักจะทำงานผิดพลาดหรือไม่ทำงานตามที่ควรจะเป็น คุณสามารถเขียนโค้ดเพื่อแสดงปุ่มบนมือถือ แต่ซ่อนไว้บนเดสก์ท็อปจนกว่าผู้ใช้จะนำเมาส์ไปวาง (hover)
Tailwind ช่วยให้เรื่องนี้ง่ายขึ้นด้วย arbitrary variants:
คุณยังสามารถเช็กความแม่นยำของตัวชี้ (pointer precision) ได้ด้วย (pointer)
• Mouse: hover และ fine pointer • Trackpad: hover และ fine pointer • Finger touch: ไม่มี hover และ coarse pointer • Stylus: มักจะเป็น hover และ fine pointer
หากคุณต้องการเช็กอุปกรณ์อินพุตทุกตัว แทนที่จะเช็กแค่ตัวหลัก ให้ใช้สิ่งเหล่านี้:
• @media (any-hover: hover) • @media (any-pointer: fine)
แท็บเล็ตที่ต่อเมาส์อยู่อาจจะรายงานว่า hover: none สำหรับอินพุตหลักของมัน แต่จะรายงานว่า any-hover: hover เพราะมีการใช้เมาส์อยู่
เลิกออกแบบโดยดูแค่ขนาดหน้าจอเพียงอย่างเดียว แล้วเริ่มออกแบบโดยดูว่าผู้ใช้สัมผัสหรือคลิกอินเทอร์เฟซของคุณอย่างไร