Ciri -ciri media interaksi dan potensi mereka (untuk andaian yang salah)

Artikel ini, kemas kini yang semakin berkembang dari sekeping dev.Opera 2015, menjelaskan salah faham mengenai ciri media pertanyaan media 4 ciri-ciri media interaksi ( pointer , hover , any-pointer , any-hover ). Artikel asal yang salah menafsirkan any-hover: none ; Versi ini sejajar dengan draf kerja terkini, menangani ketidakkonsistenan merentasi pelaksanaan pelayar (lihat hasil ujian semasa dan laporan bug yang berkaitan).

Tahap Pertanyaan Media 4 bertujuan untuk menyesuaikan gaya dan fungsi laman web (interaktiviti CSS atau tingkah laku JavaScript melalui window.matchMedia ) berdasarkan peranti input pengguna. Walaupun secara amnya disokong dengan baik, variasi pelaksanaan berterusan.

Kes penggunaan biasa melibatkan penyesuaian saiz kawalan berdasarkan skrin sentuh vs penggunaan tetikus/stylus, atau menu berasaskan hover secara kondusif:

 <code>@media (pointer: fine) { /* Mouse or stylus: small controls okay */ } @media (pointer: coarse) { /* Touchscreen: larger touch targets */ } @media (hover: hover) { /* Enable hover menus */ } @media (hover: none) { /* Disable hover menus */ }</code>

Pemaju sering memanfaatkan ciri -ciri ini untuk pengesanan sentuhan, biasanya mendengar peristiwa sentuhan apabila pointer: coarse dikesan:

 jika (window.matchmedia && window.matchmedia ("(penunjuk: kasar)"). Perlawanan) {
 / * Pointer kasar: Dengarkan acara sentuhan */
 sasaran.addeventListener ("TouchStart", ...);
} else {
 / * Jika tidak, gunakan peristiwa tetikus/papan kekunci */
}

Pendekatan ini, bagaimanapun, adalah mudah dan salah faham ciri -ciri 'tujuan.

Batasan input utama

pointer dan hover hanya mendedahkan ciri -ciri input penunjuk utama . Ini mungkin berbeza daripada input utama pengguna sebenar, terutamanya dengan garis peranti/input kabur. Secara kritis, ciri-ciri ini tidak mengesan pengguna papan kekunci sahaja. Oleh itu, pastikan kebolehcapaian papan kekunci tanpa mengira hasil pertanyaan.

Telefon dengan tetikus Bluetooth mungkin melaporkan pointer: coarse dan hover: none , walaupun pengguna terutamanya menggunakan tetikus. Sebaliknya, tablet permukaan mungkin menggunakan trackpad ( pointer: fine ), tetapi pengguna mungkin lebih suka skrin sentuh.

Masalah ini ditangani oleh any-pointer dan any-hover .

Menilai semua input

any-pointer dan any-hover mencerminkan keupayaan gabungan semua input penunjuk. Nilai berganda boleh dipadankan jika input mempunyai ciri -ciri yang berbeza. Pelaksanaan semasa umumnya berkelakuan seperti berikut:

Untuk memperbaiki kes penggunaan asal, keputusan asas pada semua input penunjuk: "Jika sebarang input adalah kasar, membesarkan kawalan," dan "membolehkan menu hover jika sekurang -kurangnya satu input menyokong hover."

 <code>@media (any-pointer: coarse) { /* At least one coarse pointer: larger controls */ } @media (any-hover: hover) { /* At least one hover-capable input: enable hover menus */ }</code>

any-pointer: none yang benar hanya jika tiada input penunjuk wujud. any-hover: none yang benar hanya jika tidak ada input yang menyokong hover, menjadikannya sebahagian besarnya berlebihan.

Menggabungkan pertanyaan untuk nuansa

Menggabungkan pertanyaan untuk penilaian halus:

 <code>@media (pointer: coarse) and (any-pointer: fine) { /* Primary input is touchscreen, but a fine input exists. Prioritize touch, but mouse/stylus users can still interact. */ } @media (pointer: fine) and (any-pointer: coarse) { /* Primary input is mouse/stylus, but a touchscreen exists. Larger controls might be safest. */ } @media (hover: none) and (any-hover: hover) { /* Primary input lacks hover, but another input supports it. Treat hover as optional. */ }</code>

Pelayar secara dinamik menilai semula pertanyaan sebagai tindak balas kepada perubahan alam sekitar (contohnya, menambah tetikus Bluetooth).

Skrip mungkin diperlukan

Ciri -ciri media interaksi tidak menunjukkan input yang digunakan sekarang . Alat seperti input apa? Jejaki peristiwa JavaScript, tetapi ini hanya memberikan maklumat selepas interaksi bermula, dan boleh tidak tepat kerana peristiwa palsu (teknologi bantuan, sokongan papan kekunci penuh iOS).

Mengelakkan pengalaman yang patah

Pengesanan sentuhan berasaskan peristiwa ( pointer: coarse -> Dengar untuk acara sentuhan) adalah cacat. Ia menghalang menggunakan input skrin bukan skrin pada peranti sentuh dan input skrin sentuh pada peranti yang didorong oleh tikus. Sebaliknya, selalu dengar untuk peristiwa tetikus/papan kekunci, dan tambahkan pendengar acara sentuh hanya jika any-pointer: coarse adalah benar:

 / * Selalu mendengar peristiwa tetikus/papan kekunci */
sasaran.addeventListener ("klik", ...);

jika (window.matchmedia && window.matchmedia ("(mana-mana-penunjuk: kasar)"). Perlawanan) {
 / * Jika penunjuk kasar wujud, juga mendengar peristiwa sentuhan */
 sasaran.addeventListener ("TouchStart", ...);
}

Sebagai alternatif, gunakan peristiwa penunjuk untuk pengendalian input bersatu.

Pilihan pengguna yang jelas

Sediakan mod pengguna yang boleh dipilih (sentuhan/tetikus) untuk mengelakkan perangkap pengesanan input. Gunakan pertanyaan media untuk memaklumkan tetapan lalai, dan mengesan input sentuh untuk meminta suis mod.

Pertanyaan yang bertanggungjawab

Memahami batasan ciri media interaksi. Jangan menganggap satu jenis input tunggal, bergantung semata -mata pada pointer dan hover , atau mengabaikan kebolehcapaian papan kekunci. Sebaliknya, mengutamakan keramahan sentuhan, menawarkan pilihan pengguna, dan sentiasa memastikan kebolehcapaian papan kekunci.

Atas ialah kandungan terperinci Ciri -ciri media interaksi dan potensi mereka (untuk andaian yang salah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!