𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗖𝗦𝗦 𝗬𝗮𝗻𝗴 𝗠𝗲𝗻𝗴𝘂𝗯𝗮𝗵 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵 𝗗𝗲𝘀𝗮𝗶𝗻 𝗦𝗮𝘆𝗮
Dahulu, saya mereka bentuk laman web dengan menyemak saiz skrin.
Saya fikir saya perlu mengesan sama ada pengguna menggunakan telefon atau tablet. Saya cuba menyemak jika ketinggian skrin lebih besar daripada lebar. Ini hanya menyemak orientasi. Ia tidak menyemak jenis peranti.
Saya menemui cara yang lebih baik. Gunakan media query untuk menyemak bagaimana orang berinteraksi dengan laman anda.
Query (hover) menyemak sama ada peranti boleh melakukan hover pada elemen.
Gunakan @media (hover: hover) untuk peranti dengan tetikus atau trackpad.
Gunakan @media (hover: none) untuk peranti sentuhan sahaja seperti telefon.
Ini membantu anda membaiki isu hover pada peranti mudah alih. Pada telefon, peraturan hover sering gagal atau bertindak pelik. Anda boleh menulis kod untuk memaparkan butang pada peranti mudah alih tetapi menyembunyikannya pada desktop sehingga pengguna melakukan hover.
Tailwind memudahkan perkara ini dengan varian arbitrari:
Anda juga boleh menyemak ketepatan penunjuk dengan (pointer).
• Tetikus: hover dan penunjuk halus (fine pointer) • Trackpad: hover dan penunjuk halus (fine pointer) • Sentuhan jari: tiada hover dan penunjuk kasar (coarse pointer) • Stylus: biasanya hover dan penunjuk halus (fine pointer)
Jika anda ingin menyemak setiap peranti input dan bukannya hanya peranti utama, gunakan ini:
• @media (any-hover: hover) • @media (any-pointer: fine)
Sebuah tablet dengan tetikus yang disambungkan mungkin melaporkan hover: none untuk input utamanya. Tetapi ia akan melaporkan any-hover: hover kerana terdapat tetikus.
Berhenti mereka bentuk hanya untuk saiz skrin. Mula mereka bentuk berdasarkan cara pengguna menyentuh atau mengklik antara muka anda.