Kueri media untuk mendeteksi apakah perangkat adalah layar sentuh

Apa cara teraman, menggunakan kueri media, untuk membuat sesuatu terjadi saat tidak menggunakan perangkat layar sentuh? Jika tidak ada cara, apakah Anda menyarankan menggunakan solusi JavaScript seperti !window.Touchatau Modernizr?

Saya menyarankan menggunakan modernizr dan menggunakan fitur kueri medianya.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

Namun menggunakan CSS, ada pseudo class seperti misalnya di Firefox. Anda dapat menggunakan : -moz-system-metric (kompatibel dengan sentuhan) . Namun fitur ini tidak tersedia untuk setiap browser.

Untuk perangkat Apple , Anda dapat menggunakan:

if(window.TouchEvent) {
   //.....
}

Khusus untuk Ipad:

if(window.Touch) {
    //....
}

Tapi, ini tidak berfungsi di Android .

Modernizr memberikan kemampuan deteksi fitur, dan mendeteksi fitur adalah cara yang baik untuk membuat kode, daripada membuat kode berdasarkan browser.

Styling Elemen Sentuh

Modernizer menambahkan kelas ke tag HTML untuk tujuan yang tepat ini. Dalam hal ini, touchdan no-touchsehingga Anda dapat gaya aspek yang berhubungan sentuhan Anda dengan awalan selektor Anda dengan .touch. mis .touch .your-container. ^{Penghargaan: Ben Swinburne}

Sebenarnya ada properti untuk ini di draf kueri media CSS4 .

Fitur media 'pointer' digunakan untuk menanyakan tentang keberadaan dan akurasi perangkat penunjuk seperti mouse. Jika perangkat memiliki beberapa mekanisme masukan, disarankan agar UA melaporkan karakteristik perangkat penunjuk yang paling tidak mampu dari mekanisme masukan utama. Kueri media ini mengambil nilai-nilai berikut:

'none'
- Mekanisme input perangkat tidak termasuk perangkat penunjuk.

'kasar'
- Mekanisme input perangkat mencakup perangkat penunjuk dengan akurasi terbatas.

'fine'
- Mekanisme input perangkat mencakup perangkat penunjuk yang akurat.

Ini akan digunakan seperti itu:

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

Saya juga menemukan tiket di proyek Chromium yang terkait dengan ini.

Kompatibilitas browser dapat diuji di Quirksmode . Ini adalah hasil saya (22 jan 2013):

• Chrome / Win: Bekerja
• Chrome / iOS: Tidak berfungsi
• Safari / iOS6: Tidak berfungsi

Solusi CSS tampaknya tidak tersedia secara luas mulai pertengahan 2013. Sebagai gantinya...

1. Nicholas Zakas menjelaskan bahwa Modernizr menerapkan no-touchkelas CSS saat browser tidak mendukung sentuhan.

2. Atau deteksi dalam JavaScript dengan potongan kode sederhana, memungkinkan Anda menerapkan solusi mirip Modernizr Anda sendiri:

   <script>
       document.documentElement.className += 
       (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
   </script>

   Kemudian Anda dapat menulis CSS Anda sebagai:

   .no-touch .myClass {
       ...
   }
   .touch .myClass {
       ...
   }

Jenis media tidak memungkinkan Anda mendeteksi kapabilitas sentuh sebagai bagian dari standar:

http://www.w3.org/TR/css3-mediaqueries/

Jadi, tidak ada cara untuk melakukannya secara konsisten melalui CSS atau kueri media, Anda harus menggunakan JavaScript.

Tidak perlu menggunakan Modernizr, Anda cukup menggunakan JavaScript biasa:

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("touch is enabled!");
</script>

Pada 2017, kueri media CSS dari jawaban kedua masih tidak berfungsi di Firefox. Saya menemukan soluton untuk itu: -moz-touch-enabled

Jadi, inilah kueri media lintas-browser:

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    .something {
        its: working;
    }
}

Sebenarnya ada media query untuk itu:

@media (hover: none) { … }

Selain Firefox, ini didukung dengan cukup baik . Safari dan Chrome menjadi browser yang paling umum di perangkat seluler, itu mungkin cukup sampai adopsi yang lebih besar.

Ini akan berhasil. Jika tidak memberi tahu saya

@media (hover: none) and (pointer: coarse) {
    /* Touch screen device style goes here */
}

edit: hover on-demand tidak lagi didukung

Solusi ini akan berfungsi sampai CSS4 didukung secara global oleh semua browser. Ketika hari itu tiba gunakan saja CSS4. tetapi hingga saat itu, ini berfungsi untuk browser saat ini.

browser-util.js

export const isMobile = {
  android: () => navigator.userAgent.match(/Android/i),
  blackberry: () => navigator.userAgent.match(/BlackBerry/i),
  ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
  opera: () => navigator.userAgent.match(/Opera Mini/i),
  windows: () => navigator.userAgent.match(/IEMobile/i),
  any: () => (isMobile.android() || isMobile.blackberry() || 
  isMobile.ios() || isMobile.opera() || isMobile.windows())
};

onload:

cara lama:

isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;

cara yang lebih baru:

isMobile.any() ? document.body.classList.add('is-touch') : null;

Kode di atas akan menambahkan kelas "is-touch" ke tag body jika perangkat memiliki layar sentuh. Sekarang lokasi mana pun di aplikasi web Anda di mana Anda akan memiliki css untuk: hover Anda dapat memanggilbody:not(.is-touch) the_rest_of_my_css:hover

sebagai contoh:

button:hover

menjadi:

body:not(.is-touch) button:hover

Solusi ini menghindari penggunaan modernizer karena lib modernizer adalah perpustakaan yang sangat besar. Jika semua yang Anda coba lakukan adalah mendeteksi layar sentuh, Ini akan menjadi yang terbaik ketika ukuran sumber terkompilasi akhir adalah persyaratan.

menambahkan layar sentuh kelas ke tubuh menggunakan JS atau jQuery

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }

Saya dapat menyelesaikan masalah ini menggunakan ini

@media (hover:none), (hover:on-demand) { 
Your class or ID{
attributes
}    
}