𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵
Dulu saya mendesain situs web dengan memeriksa ukuran layar.
Saya pikir saya perlu mendeteksi apakah pengguna menggunakan ponsel atau tablet. Saya mencoba memeriksa apakah tinggi layar lebih besar daripada lebarnya. Ini hanya memeriksa orientasi. Ini tidak memeriksa jenis perangkat.
Saya menemukan cara yang lebih baik. Gunakan media query untuk memeriksa bagaimana orang berinteraksi dengan situs Anda.
Query (hover) memeriksa apakah sebuah perangkat dapat melakukan hover pada elemen.
Gunakan @media (hover: hover) untuk perangkat dengan mouse atau trackpad.
Gunakan @media (hover: none) untuk perangkat khusus sentuh seperti ponsel.
Ini membantu Anda memperbaiki masalah hover pada perangkat seluler. Pada ponsel, aturan hover sering kali gagal atau berperilaku aneh. Anda dapat menulis kode untuk menampilkan tombol di seluler tetapi menyembunyikannya di desktop sampai pengguna melakukan hover.
Tailwind mempermudah hal ini dengan arbitrary variants:
Anda juga dapat memeriksa presisi pointer dengan (pointer).
• Mouse: hover dan fine pointer • Trackpad: hover dan fine pointer • Sentuhan jari: tanpa hover dan coarse pointer • Stylus: biasanya hover dan fine pointer
Jika Anda ingin memeriksa setiap perangkat input alih-alih hanya perangkat utamanya, gunakan ini:
• @media (any-hover: hover) • @media (any-pointer: fine)
Sebuah tablet dengan mouse yang terpasang mungkin melaporkan hover: none untuk input utamanya. Namun, ia akan melaporkan any-hover: hover karena ada mouse yang terhubung.
Berhentilah mendesain hanya berdasarkan ukuran layar. Mulailah mendesain berdasarkan cara pengguna menyentuh atau mengklik antarmuka Anda.