Cihazın dokunmatik ekran olup olmadığını tespit etmek için medya sorgusu

Dokunmatik ekranlı bir cihazda değilken bir şeyi gerçekleştirmenin en güvenli yolu, medya sorgularını kullanmak nedir? Hiçbir şekilde yoksa, !window.Touchveya Modernizr gibi bir JavaScript çözümü kullanmanızı önerir misiniz ?

Modernizr'i kullanmanızı ve medya sorgu özelliklerini kullanmanızı öneririm .

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

Bununla birlikte, CSS kullanıldığında, örneğin Firefox'ta olduğu gibi sözde sınıf vardır. Şunları kullanabilirsiniz : -moz-system-metric (dokunmatik) . Ancak bu özellikler her tarayıcıda mevcut değildir.

İçin Apple cihazlar, basit kullanımı yapabilirsiniz:

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

Özellikle Ipad için:

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

Ancak bunlar Android'de çalışmıyor .

Modernizr , özellik algılama yetenekleri sağlar ve özellikleri algılama, tarayıcılara dayalı kodlama yapmaktan ziyade kodlamanın iyi bir yoludur.

Dokunmatik Öğelerin Stilini Ayarlama

Modernizer, tam da bu amaç için HTML etiketine sınıflar ekler. Bu durumda, touchve no-touchsen .touch ile seçicileri adýnýnönüne dokunuşun ilgili yönlerini stil böylece. ör .touch .your-container. ^{Kredi: Ben Swinburne}

CSS4 ortam sorgu taslağında aslında bunun için bir özellik vardır .

'İşaretçi' medya özelliği, fare gibi bir işaretleme aygıtının varlığını ve doğruluğunu sorgulamak için kullanılır. Bir aygıtın birden fazla giriş mekanizması varsa, UA'nın birincil giriş mekanizmalarının en az yetenekli işaretleme aygıtının özelliklerini rapor etmesi önerilir. Bu ortam sorgusu aşağıdaki değerleri alır:

"yok"
- Aygıtın giriş mekanizması bir işaretleme aygıtı içermez.

'kaba'
- Cihazın giriş mekanizması, sınırlı doğruluğa sahip bir işaretleme cihazı içerir.

'iyi'
- Cihazın giriş mekanizması, doğru bir işaretleme cihazı içerir.

Bu şu şekilde kullanılacaktır:

/* 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;
    }
}

Ayrıca bir bilet buldum ilgili Chromium projesinde .

Tarayıcı uyumluluğu Quirksmode'da test edilebilir . Sonuçlar benim sonuçlarım (22 Ocak 2013):

• Chrome / Win: Çalışır
• Chrome / iOS: Çalışmıyor
• Safari / iOS6: Çalışmıyor

CSS çözümleri, 2013 ortasından itibaren yaygın olarak kullanılamayacak gibi görünmektedir. Yerine...

1. Nicholas Zakas, Modernizr'in no-touch, tarayıcı dokunmayı desteklemediğinde bir CSS sınıfı uyguladığını açıklıyor .

2. Veya kendi Modernizr benzeri çözümünüzü uygulamanıza izin veren basit bir kod parçasıyla JavaScript'te tespit edin:

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

   Ardından CSS'nizi şu şekilde yazabilirsiniz:

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

Ortam türleri, standardın bir parçası olarak dokunma yeteneklerini algılamanıza izin vermez:

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

Dolayısıyla, bunu tutarlı bir şekilde CSS veya medya sorguları yoluyla yapmanın bir yolu yoktur , JavaScript'e başvurmanız gerekecektir.

Modernizr kullanmanıza gerek yok, sadece düz JavaScript kullanabilirsiniz:

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

2017'de, ikinci yanıttaki CSS medya sorgusu hala Firefox'ta çalışmıyor. Bunun için bir çözüm buldum: -moz-touch-etkin

İşte tarayıcılar arası medya sorgusu:

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

Aslında bunun için bir medya sorgusu var:

@media (hover: none) { … }

Firefox dışında oldukça iyi destekleniyor . Safari ve Chrome, mobil cihazlarda en yaygın tarayıcılar olduğundan, daha fazla benimsenene kadar yeterli olabilir.

Bu çalışacak. Eğer bana haber vermiyorsa

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

edit: hover on-demand artık desteklenmiyor

Bu çözüm, CSS4 tüm tarayıcılar tarafından global olarak desteklenene kadar çalışacaktır. O gün geldiğinde sadece CSS4 kullanın. ancak o zamana kadar bu, mevcut tarayıcılarda çalışır.

tarayıcı 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:

eski yol:

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

daha yeni yol:

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

Cihazın dokunmatik ekranı varsa, yukarıdaki kod "is-touch" sınıfını gövde etiketine ekleyecektir. Artık web uygulamanızda css'e sahip olabileceğiniz herhangi bir konum: arama yapabileceğiniz fareyle üzerine gelinbody:not(.is-touch) the_rest_of_my_css:hover

Örneğin:

button:hover

dönüşür:

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

Modernleştirici kitaplığı çok büyük bir kitaplık olduğundan, bu çözüm modernleştiricinin kullanılmasını önler. Tek yapmaya çalıştığınız dokunmatik ekranları tespit etmekse, bu, derlenen son kaynağın boyutu bir gereklilik olduğunda en iyisi olacaktır.

JS veya jQuery kullanarak gövdeye bir sınıf dokunmatik ekranı ekleme

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

Bunu kullanarak bu sorunu çözebildim

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