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.Touch
atau Modernizr?
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.Touch
atau Modernizr?
Jawaban:
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.
Modernizer menambahkan kelas ke tag HTML untuk tujuan yang tepat ini. Dalam hal ini, touch
dan no-touch
sehingga Anda dapat gaya aspek yang berhubungan sentuhan Anda dengan awalan selektor Anda dengan .touch. mis .touch .your-container
. Penghargaan: Ben Swinburne
modernizr
akan menjadi sempurna :)
Modernizr.touch
tes hanya menunjukkan jika dukungan browser yang menyentuh peristiwa, yang tidak selalu mencerminkan perangkat touchscreen. Misalnya, ponsel Palm Pre / WebOS (sentuh) tidak mendukung aktivitas sentuh sehingga gagal dalam pengujian ini.
touch
dan no-touch
sehingga Anda dapat gaya sentuhan Anda terkait aspek dengan awalan selektor Anda dengan .touch
. Misalnya.touch .your-container
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):
Solusi CSS tampaknya tidak tersedia secara luas mulai pertengahan 2013. Sebagai gantinya...
Nicholas Zakas menjelaskan bahwa Modernizr menerapkan no-touch
kelas CSS saat browser tidak mendukung sentuhan.
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>
window.touch
&& window.TouchEvent
hanya berfungsi untuk perangkat apple.
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;
}
}
-moz-touch-enabled
tidak akan dibutuhkan segera
-moz-touch-enabled
seharusnya tidak didukung di Firefox 58+. Seperti pada, solusi ini tidak mencakup Firefox 58-63 (karena Firefox 64+ mendukung kueri penunjuk). Sumber: developer.mozilla.org/en-US/docs/Web/CSS/@media/…
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.
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.
Saya dapat menyelesaikan masalah ini menggunakan ini
@media (hover:none), (hover:on-demand) {
Your class or ID{
attributes
}
}
on-demand
telah dihapus dari spesifikasi dan dari browser: github.com/w3c/csswg-drafts/commit/…