การสืบค้นสื่อเพื่อตรวจสอบว่าอุปกรณ์เป็นหน้าจอสัมผัสหรือไม่

วิธีใดที่ปลอดภัยที่สุดโดยใช้การสืบค้นสื่อเพื่อให้บางสิ่งเกิดขึ้นเมื่อไม่ได้อยู่บนอุปกรณ์หน้าจอสัมผัส หากไม่มีวิธีใดคุณแนะนำให้ใช้โซลูชัน JavaScript เช่น!window.Touchหรือ Modernizr หรือไม่

ฉันขอแนะนำให้ใช้modernizrและใช้คุณสมบัติการสืบค้นสื่อ

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

อย่างไรก็ตามการใช้ CSS มีคลาสหลอกเช่นใน Firefox คุณสามารถใช้: -moz ระบบเมตริก (สัมผัสที่เปิดใช้งาน) แต่คุณสมบัติเหล่านี้ไม่สามารถใช้ได้กับทุกเบราว์เซอร์

สำหรับอุปกรณ์Appleคุณสามารถใช้งานง่ายๆ:

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

โดยเฉพาะอย่างยิ่งสำหรับ Ipad:

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

แต่เหล่านี้ไม่ได้ทำงานบน Android

Modernizrให้ความสามารถในการตรวจจับคุณลักษณะและคุณลักษณะการตรวจจับเป็นวิธีที่ดีในการเขียนโค้ดแทนที่จะเขียนโค้ดบนเบราว์เซอร์

จัดแต่งทรงผม Touch Elements

Modernizer เพิ่มคลาสให้กับแท็ก HTML เพื่อจุดประสงค์นี้ ในกรณีนี้touchและno-touchเพื่อให้คุณสามารถจัดรูปแบบลักษณะที่เกี่ยวข้องกับการสัมผัสของคุณได้โดยนำตัวเลือกของคุณด้วย. touch เช่น.touch .your-container. ^{เครดิต: Ben Swinburne}

มีจริงคุณสมบัติสำหรับการนี้ในส่วนสื่อ CSS4 แบบสอบถามร่าง

คุณลักษณะสื่อ 'ตัวชี้' ใช้เพื่อสอบถามเกี่ยวกับการมีอยู่และความแม่นยำของอุปกรณ์ชี้ตำแหน่งเช่นเมาส์ หากอุปกรณ์มีกลไกการป้อนข้อมูลหลายแบบขอแนะนำให้ UA รายงานลักษณะของอุปกรณ์ชี้ตำแหน่งที่มีความสามารถน้อยที่สุดของกลไกอินพุตหลัก แบบสอบถามสื่อนี้รับค่าต่อไปนี้:

'none'
- กลไกการป้อนข้อมูลของอุปกรณ์ไม่รวมอุปกรณ์ชี้ตำแหน่ง

'หยาบ'
- กลไกการป้อนข้อมูลของอุปกรณ์ประกอบด้วยอุปกรณ์ชี้ตำแหน่งที่มีความแม่นยำ จำกัด

'ดี'
- กลไกการป้อนข้อมูลของอุปกรณ์ประกอบด้วยอุปกรณ์ชี้ตำแหน่งที่ถูกต้อง

สิ่งนี้จะถูกใช้เช่นนี้:

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

ฉันยังพบตั๋วในโครงการ Chromium ที่เกี่ยวข้องกับเรื่องนี้

ความเข้ากันได้เบราว์เซอร์สามารถทดสอบได้ที่quirksmode นี่คือผลลัพธ์ของฉัน (22 มกราคม 2013):

• Chrome / Win: ใช้งานได้
• Chrome / iOS: ไม่ทำงาน
• Safari / iOS6: ไม่ทำงาน

โซลูชัน CSS ดูเหมือนจะไม่สามารถใช้งานได้ทั่วไปในช่วงกลางปี ​​2013 แทน...

1. Nicholas Zakas อธิบายว่า Modernizr ใช้no-touchคลาส CSS เมื่อเบราว์เซอร์ไม่รองรับการสัมผัส

2. หรือตรวจจับใน JavaScript ด้วยโค้ดง่ายๆช่วยให้คุณสามารถใช้งานโซลูชันแบบ Modernizr ของคุณเองได้:

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

   จากนั้นคุณสามารถเขียน CSS ของคุณเป็น:

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

ประเภทสื่อไม่อนุญาตให้คุณตรวจจับความสามารถในการสัมผัสซึ่งเป็นส่วนหนึ่งของมาตรฐาน:

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

ดังนั้นไม่มีวิธีใดที่จะทำได้อย่างสม่ำเสมอผ่าน CSS หรือแบบสอบถามสื่อคุณจะต้องใช้ JavaScript

ไม่จำเป็นต้องใช้ Modernizr คุณสามารถใช้ JavaScript ธรรมดา:

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

ในปี 2560 การสืบค้นสื่อ CSS จากคำตอบที่สองยังใช้ไม่ได้กับ Firefox ฉันพบโซลูตันสำหรับสิ่งนั้น: -moz-touch-enabled

ดังนั้นนี่คือแบบสอบถามสื่อข้ามเบราว์เซอร์:

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

มีแบบสอบถามสื่อสำหรับสิ่งนั้นจริงๆ:

@media (hover: none) { … }

นอกเหนือจาก Firefox ก็สนับสนุนค่อนข้างดี Safari และ Chrome เป็นเบราว์เซอร์ที่พบบ่อยที่สุดในอุปกรณ์เคลื่อนที่ซึ่งอาจเพียงพอสำหรับการนำไปใช้งานมากขึ้น

วิธีนี้จะได้ผล ถ้ามันไม่แจ้งให้เราทราบ

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

แก้ไข: ไม่รองรับการวางเมาส์เหนือความต้องการอีกต่อไป

โซลูชันนี้จะใช้งานได้จนกว่า CSS4 จะได้รับการสนับสนุนทั่วโลกโดยเบราว์เซอร์ทั้งหมด เมื่อถึงวันนั้นให้ใช้ CSS4 แต่ก่อนหน้านี้สิ่งนี้ใช้ได้กับเบราว์เซอร์ปัจจุบัน

เบราว์เซอร์ 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:

วิธีเก่า:

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

วิธีที่ใหม่กว่า:

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

โค้ดด้านบนจะเพิ่มคลาส "is-touch" ลงในแท็ก body หากอุปกรณ์มีหน้าจอสัมผัส ตอนนี้ตำแหน่งใดก็ได้ในเว็บแอปพลิเคชันของคุณที่คุณจะมี css for: hover คุณสามารถโทรได้body:not(.is-touch) the_rest_of_my_css:hover

ตัวอย่างเช่น:

button:hover

กลายเป็น:

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

โซลูชันนี้หลีกเลี่ยงการใช้ modernizer เนื่องจาก modernizer lib เป็นไลบรารีที่ใหญ่มาก หากสิ่งที่คุณพยายามทำคือตรวจจับหน้าจอสัมผัสสิ่งนี้จะดีที่สุดเมื่อขนาดของแหล่งที่รวบรวมขั้นสุดท้ายเป็นข้อกำหนด

การเพิ่มหน้าจอสัมผัสของคลาสให้กับเนื้อหาโดยใช้ JS หรือ jQuery

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

ฉันสามารถแก้ไขปัญหานี้ได้โดยใช้สิ่งนี้

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