Truy vấn phương tiện để phát hiện xem thiết bị có phải là màn hình cảm ứng hay không

Cách an toàn nhất, sử dụng truy vấn phương tiện, để thực hiện điều gì đó xảy ra khi không sử dụng thiết bị màn hình cảm ứng? Nếu không có cách nào, bạn có đề xuất sử dụng giải pháp JavaScript như !window.TouchModernizr không?

Tôi sẽ đề xuất sử dụng modernizr và sử dụng các tính năng truy vấn phương tiện của nó.

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

Tuy nhiên, bằng cách sử dụng CSS, có những lớp giả như trong Firefox. Bạn có thể sử dụng : -moz-system-metric (kích hoạt cảm ứng) . Nhưng những tính năng này không có sẵn cho mọi trình duyệt.

Đối với các thiết bị của Apple , bạn có thể sử dụng đơn giản:

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

Đặc biệt đối với Ipad:

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

Tuy nhiên, những điều này không hoạt động trên Android .

Modernizr cung cấp khả năng phát hiện tính năng và phát hiện tính năng là một cách tốt để viết mã, thay vì mã hóa dựa trên trình duyệt.

Các yếu tố cảm ứng tạo kiểu

Modernizer thêm các lớp vào thẻ HTML cho mục đích chính xác này. Trong trường hợp này, touchvà no-touchdo đó, bạn có thể tạo kiểu cảm ứng khía cạnh liên quan của bạn bằng cách đặt trước selectors của bạn với .touch. vd .touch .your-container. ^{Tín dụng: Ben Swinburne}

Thực sự có một thuộc tính cho điều này trong bản nháp truy vấn phương tiện CSS4 .

Tính năng phương tiện 'con trỏ' được sử dụng để truy vấn về sự hiện diện và độ chính xác của thiết bị trỏ chẳng hạn như chuột. Nếu một thiết bị có nhiều cơ chế đầu vào, UA nên báo cáo các đặc điểm của thiết bị trỏ kém khả năng nhất trong số các cơ chế đầu vào chính. Truy vấn phương tiện này nhận các giá trị sau:

'none'
- Cơ chế đầu vào của thiết bị không bao gồm thiết bị trỏ.

'thô'
- Cơ chế đầu vào của thiết bị bao gồm một thiết bị trỏ có độ chính xác hạn chế.

'fine'
- Cơ chế đầu vào của thiết bị bao gồm một thiết bị trỏ chính xác.

Điều này sẽ được sử dụng như vậy:

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

Tôi cũng đã tìm thấy một vé trong dự án Chromium liên quan đến điều này.

Khả năng tương thích của trình duyệt có thể được kiểm tra tại Quirksmode . Đây là kết quả của tôi (22 tháng 1 năm 2013):

• Chrome / Win: Hoạt động
• Chrome / iOS: Không hoạt động
• Safari / iOS6: Không hoạt động

Các giải pháp CSS dường như không được cung cấp rộng rãi vào giữa năm 2013. Thay thế...

1. Nicholas Zakas giải thích rằng Modernizr áp dụng một no-touchlớp CSS khi trình duyệt không hỗ trợ cảm ứng.

2. Hoặc phát hiện trong JavaScript bằng một đoạn mã đơn giản, cho phép bạn triển khai giải pháp giống Modernizr của riêng mình:

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

   Sau đó, bạn có thể viết CSS của mình dưới dạng:

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

Các loại phương tiện không cho phép bạn phát hiện các khả năng cảm ứng như một phần của tiêu chuẩn:

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

Vì vậy, không có cách nào để làm điều đó một cách nhất quán thông qua CSS hoặc truy vấn phương tiện, bạn sẽ phải sử dụng đến JavaScript.

Không cần sử dụng Modernizr, bạn chỉ có thể sử dụng JavaScript đơn giản:

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

Vào năm 2017, truy vấn phương tiện CSS từ câu trả lời thứ hai vẫn không hoạt động trên Firefox. Tôi đã tìm thấy một giải pháp cho điều đó: -moz-touch-enable

Vì vậy, đây là truy vấn phương tiện đa trình duyệt:

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

Thực sự có một truy vấn phương tiện cho điều đó:

@media (hover: none) { … }

Ngoài Firefox, nó được hỗ trợ khá tốt . Safari và Chrome là những trình duyệt phổ biến nhất trên thiết bị di động, nó có thể đủ cho đến khi được áp dụng nhiều hơn.

Điều này sẽ hoạt động. Nếu nó không cho tôi biết

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

chỉnh sửa: di chuột theo yêu cầu không được hỗ trợ nữa

Giải pháp này sẽ hoạt động cho đến khi CSS4 được hỗ trợ trên toàn cầu bởi tất cả các trình duyệt. Khi ngày đó đến, chỉ cần sử dụng CSS4. nhưng cho đến lúc đó, điều này hoạt động cho các trình duyệt hiện tại.

browser-use.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())
};

đang tải:

cách cũ:

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

cách mới hơn:

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

Đoạn mã trên sẽ thêm lớp "is-touch" vào thẻ body nếu thiết bị có màn hình cảm ứng. Bây giờ, bất kỳ vị trí nào trong ứng dụng web của bạn mà bạn sẽ có css cho: di chuột, bạn có thể gọibody:not(.is-touch) the_rest_of_my_css:hover

ví dụ:

button:hover

trở thành:

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

Giải pháp này tránh sử dụng trình hiện đại hóa vì lib hiện đại hóa là một thư viện rất lớn. Nếu tất cả những gì bạn đang cố gắng làm là phát hiện màn hình cảm ứng, Điều này sẽ tốt nhất khi kích thước của nguồn được biên dịch cuối cùng là một yêu cầu.

thêm màn hình cảm ứng lớp vào phần thân bằng JS hoặc jQuery

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

Tôi đã có thể giải quyết vấn đề này bằng cách sử dụng

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