डिवाइस टचस्क्रीन है या नहीं, यह पता लगाने के लिए मीडिया क्वेरी

122

टचस्क्रीन डिवाइस पर न होने पर कुछ करने के लिए मीडिया के प्रश्नों का उपयोग करने का सबसे सुरक्षित तरीका क्या है? अगर कोई रास्ता नहीं है, तो क्या आप जावास्क्रिप्ट समाधान का उपयोग करने का सुझाव देते हैं जैसे कि !window.Touchमॉर्डनिज़्र?

css touch media-queries

— JJJollyjim
स्रोत

2

2018 के लिए तेजी से आगे, CSS अब मूल रूप से यह stackoverflow.com/a/50285058/1717735

— Buzut

37

मैं सुझाव दूंगा कि आधुनिकीकरण का उपयोग करें और इसकी मीडिया क्वेरी सुविधाओं का उपयोग करें।

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

हालाँकि, CSS का उपयोग करके, जैसे कि फ़ायरफ़ॉक्स में छद्म वर्ग हैं। आप उपयोग कर सकते हैं : -Moz- सिस्टम-मीट्रिक (स्पर्श-सक्षम) । लेकिन ये फीचर्स हर ब्राउजर के लिए उपलब्ध नहीं हैं।

के लिए एप्पल उपकरणों, आप सरल उपयोग कर सकते हैं:

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

विशेष रूप से Ipad के लिए:

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

लेकिन, ये एंड्रॉइड पर काम नहीं करते हैं ।

मॉर्डनिजर फीचर डिटेक्शन एबिलिटी देता है और ब्राउजर के आधार पर कोडिंग के बजाय फीचर्स को डिटेक्ट करना एक अच्छा तरीका है।

स्टाइलिंग टच तत्व

आधुनिकतावादी इस सटीक उद्देश्य के लिए HTML टैग में कक्षाएं जोड़ता है। इस मामले में, touchऔर no-touchइसलिए आप अपने चयनकर्ताओं को .touch के साथ उपसर्ग करके अपने स्पर्श संबंधी पहलुओं को स्टाइल कर सकते हैं। उदा .touch .your-container। ^{क्रेडिट: बेन स्वाइनबर्न}

— Starx
स्रोत

क्या मैं यह सोचने में सही हूँ कि सभी आधुनिक उपकरणों / ब्राउज़रों के साथ कोई भी psedo कक्षाएं काम नहीं करती हैं?

— JJJollyjim

@ JJ56, हाँ हर ब्राउज़र टच छद्म कक्षाओं का समर्थन नहीं करता है। लेकिन यह वह जगह है जहाँ modernizrसही होगा :)

— Starx

18

Modernizr.touchपरीक्षण केवल इंगित करता है यदि ब्राउज़र का समर्थन करता है घटनाओं, जो जरूरी एक टचस्क्रीन डिवाइस को प्रतिबिंबित नहीं करता स्पर्श करें। उदाहरण के लिए, पाम प्री / वेबओएस (टच) फोन स्पर्श घटनाओं का समर्थन नहीं करते हैं और इस तरह इस परीक्षण को विफल करते हैं।

— numediaweb

5

बस इसे जोड़ने के लिए, यदि आप वैसे भी आधुनिकीकरण में शामिल हैं; मॉर्डनाइज़र इस सटीक उद्देश्य के लिए बॉडी टैग में कक्षाएं जोड़ता है। इस मामले में, touchऔर no-touchइसलिए आप अपने चयनकर्ताओं के साथ प्रीफ़िक्स करके अपने स्पर्श संबंधी पहलुओं को स्टाइल कर सकते हैं .touch। जैसे.touch .your-container

— बेन स्विनबर्न

2

मेरे लिए ऐसा लगता है कि आधुनिकीकरण html टैग को टच क्लास जोड़ता है, बॉडी टैग नहीं।

— रोबिन कॉक्स

162

CSS4 मीडिया क्वेरी ड्राफ्ट में वास्तव में इसके लिए एक संपत्ति है ।

'पॉइंटर' मीडिया फीचर का इस्तेमाल माउस जैसे पॉइंटिंग डिवाइस की मौजूदगी और सटीकता के बारे में बताने के लिए किया जाता है। यदि किसी उपकरण में एकाधिक इनपुट तंत्र हैं, तो यह अनुशंसा की जाती है कि UA प्राथमिक इनपुट तंत्र के कम से कम सक्षम पॉइंटिंग डिवाइस की विशेषताओं की रिपोर्ट करें। यह मीडिया क्वेरी निम्न मान लेता है:

'कोई नहीं'
- डिवाइस के इनपुट तंत्र में एक पॉइंटिंग डिवाइस शामिल नहीं है।

'मोटे ’
- डिवाइस के इनपुट तंत्र में सीमित सटीकता का एक पॉइंटिंग डिवाइस शामिल है।

'ठीक'
- डिवाइस के इनपुट तंत्र में एक सटीक पॉइंटिंग डिवाइस शामिल है।

इसका उपयोग इस प्रकार किया जाएगा:

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

मुझे इस से संबंधित क्रोमियम परियोजना में एक टिकट भी मिला ।

ब्राउज़र संगतता को Quirksmode पर परीक्षण किया जा सकता है । ये मेरे परिणाम हैं (22 जून 2013):

क्रोम / जीत: काम करता है
Chrome / iOS: काम नहीं करता है
सफ़ारी / iOS6: काम नहीं करता है

— Znarkus
स्रोत

3

जब यह समाधान पोस्टर के अनुसार भी काम नहीं करता है, तो यह सबसे अधिक बिंदुओं के साथ कैसे हो सकता है?

— इरेडमिस्टर

5

इसके लिए ब्राउज़र समर्थन उतना बुरा नहीं है: एज, क्रोम, सफारी, आईओएस और एंड्रॉइड। देखें: caniuse.com/#feat=css-media-interaction

— जोसा

3

अच्छा उत्तर। अतिरिक्त रूप से: developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

— 14

मेरे लिए काम करता है;) इस शोध के लिए धन्यवाद!

— वेरि

52

2013 के मध्य तक CSS समाधान व्यापक रूप से उपलब्ध नहीं हैं। बजाय...

निकोलस ज़कास बताते हैं कि no-touchजब ब्राउज़र स्पर्श का समर्थन नहीं करता है तो मॉडर्निज़र एक सीएसएस क्लास लागू करता है।
या जावास्क्रिप्ट में पता लगाएं एक सरल कोड के साथ, आप अपने खुद के आधुनिकीकरण जैसे समाधान को लागू करने की अनुमति देते हैं:
```
<script>
    document.documentElement.className += 
    (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>
```
तब आप अपने सीएसएस को इस प्रकार लिख सकते हैं:
```
.no-touch .myClass {
    ...
}
.touch .myClass {
    ...
}
```

— साइमन पूर्व
स्रोत

दूसरा बहुत अच्छा है। मेरे लिए एक आकर्षण काम करता है! धन्यवाद।

— गरवानी

@ bjb568 सुझाए गए संपादन के लिए धन्यवाद, जो एक अधिक आधुनिक विकल्प है, लेकिन जैसा कि यह केवल IE 10 और इसके बाद के संस्करण में काम करता है, मुझे लगता है कि इस संस्करण को फिलहाल बनाए रखना सबसे अच्छा है।

— साइमन ईस्ट

लगता है कि कक्षा html टैग पर होगी; जिसका मतलब है कि CSP का उपयोग करते समय यह डिफ़ॉल्ट रूप से अक्षम हो जाएगा।

— सिंह

35

मीडिया प्रकार आपको मानक के भाग के रूप में स्पर्श क्षमताओं का पता लगाने की अनुमति नहीं देते हैं:

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

तो, सीएसएस या मीडिया प्रश्नों के माध्यम से इसे लगातार करने का कोई तरीका नहीं है , आपको जावास्क्रिप्ट का सहारा लेना होगा।

मॉडर्निज़्र का उपयोग करने की कोई आवश्यकता नहीं है, आप बस सादे जावास्क्रिप्ट का उपयोग कर सकते हैं:

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

— एलेक्स डब्ल्यू
स्रोत

AFAIK, window.touch&& window.TouchEventकेवल सेब उपकरणों के लिए काम करते हैं।

— स्टारएक्स

22

@vsync मॉर्डनिज्र एक परीक्षण योग्य लाइब्रेरी में डेवलपर्स के लिए उपयोगी सभी परीक्षणों को रखने का एक शानदार तरीका है, उनके लिए हर बार Google को एक विशिष्ट सुविधा का परीक्षण करने की आवश्यकता नहीं है, जैसे स्पर्श घटनाओं और इस पृष्ठ को खोजने के लिए। FYI करें वहाँ एक कस्टम Modernizr बिल्ड है जिसे आप इच्छित परीक्षणों के साथ अनुकूलित कर सकते हैं। यह परियोजनाओं के बीच हमेशा एक ही तरह से परीक्षण सुविधाओं का एक शानदार तरीका है, या तो आप जेएस सिंटैक्स (यानी: Modernizr.touch) या सीएसएस कक्षाएं (.touch .my- तत्व {}) का उपयोग करें। मुझे लगता है कि यह मानव बुद्धि का अपमान है कि हम हर बार पहिए को बिना मजबूत किए चीजों को नहीं पहचान सकते।

— अलेजांद्रो गार्सिया इग्लेसियस

11

खैर, मैंने सैकड़ों प्रोजेक्ट्स पर काम किया है और आईडीड को ऐसी किसी चीज की कभी जरूरत नहीं पड़ी है, ज्यादातर मामलों में आपको जरूरत है एक बहुत ही छोटे से परीक्षण की, कभी भी 5 से ज्यादा मैं नहीं कहूंगा (ज्यादातर मामलों में), तो बस मिल जाए उन 5 और उन्हें सीधे आपके कोड में डाल दें, वास्तव में मॉर्डनाइज़र वेबसाइट पर जाने की ज़रूरत नहीं है, एक कस्टम बिल्ड बनाएं, इसे अपने पेज में शामिल करें, या जो भी हो। डेवलपर्स को आलसी नहीं होना चाहिए। एक वेब डेवलपर को हमेशा "मैं कोड को हल्का कैसे बना सकता हूं?" की मानसिकता होनी चाहिए। IMHO और वर्षों का अनुभव। डेवलपर्स आजकल स्क्रिप्ट के टन सहित प्यार करने लगता है: /

— vsync

2

कुछ कहते हैं आलसी। मैं कहता हूं कि पहिए को क्यों मजबूत किया जाए? जब कोई नया उपकरण / संस्करण / प्लेटफ़ॉर्म दिखाई देता है और आपके विशेष मामले को बदलने की आवश्यकता होती है तो क्या होगा? क्या आप क) विशेष केस डिटेक्शन कोड का काम करने की कोशिश कर रहे हैं, और अपने कस्टम कोड के लिए बैकपोर्ट प्राप्त कर रहे हैं, इस प्रक्रिया में अपने आप को पुनः प्राप्त कर रहे हैं, या b) मॉर्डनिज़्र के अधिक हाल के संस्करण को डाउनलोड करें और इसमें ड्रॉप करें? मुझे पता है कि मैं क्या करूँगा। गार्सियावेबदेव को +1।

— Sc0ttyD

@ Sc0ttyD मेरी निजी प्राथमिकता मॉडर्निज़्रर जैसे पुस्तकालयों के आधार पर शुरू में चीजों को कोड करना सीखना है। किसी दिन आपको उस व्यक्ति को नए डिवाइस के लिए कोडिंग करने की आवश्यकता हो सकती है और आप अटकना नहीं चाहते क्योंकि आप इसे बिना लाइब्रेरी के नहीं कर सकते। उल्लेख नहीं करने के लिए, शायद बहुत से ऐसे लोग हैं जो नई लाइब्रेरी सीखने के लिए अपनी नौकरी पर समय नहीं रखते हैं।

— एलेक्स डब्ल्यू

28

2017 में, सीएसएस मीडिया क्वेरी दूसरे उत्तर से अभी भी फ़ायरफ़ॉक्स पर काम नहीं करती है। मुझे इसके लिए एक विलेपन मिला: -मोज़ -टच-इनेबल्ड

तो, यहाँ क्रॉस-ब्राउज़र मीडिया क्वेरी है:

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

— सोकोलोव
स्रोत

यह अधिक होना चाहिए और स्वीकृत उत्तर होना चाहिए। फ़ायरफ़ॉक्स कल्पना को लागू करने पर काम कर रहा है, इसलिए -moz-touch-enabledजल्द ही आवश्यक नहीं होगा

— डॉगोकू

11. दिसंबर 18 के बाद अपडेट किया जा सकता है। wiki.mozilla.org/Release_Management/Calendar developer.mozilla.org/en-US/docs/Web/CSS/@media/…

— retrovertigo

@ user3445853 ओपी पूछता है कि टचस्क्रीन वाले डिवाइस का पता कैसे लगाएं (मीडिया क्वेरी के माध्यम से)। यदि नियम "(सूचक: कोई नहीं)" सही होगा, तो डिवाइस में निश्चित रूप से टचस्क्रीन नहीं है। लेकिन किसी को मेरी राय (या नहीं) की पुष्टि करनी चाहिए :)

— सोकोलो

-moz-touch-enabledमाना जाता है कि फ़ायरफ़ॉक्स 58+ में समर्थित नहीं है। जैसा कि, यह समाधान फ़ायरफ़ॉक्स 58-63 को कवर नहीं करता है (क्योंकि फ़ायरफ़ॉक्स 64+ सूचक क्वेरी का समर्थन करता है)। स्रोत: developer.mozilla.org/en-US/docs/Web/CSS/@media/…

— fgblomqvist

24

वास्तव में इसके लिए एक मीडिया क्वेरी है:

@media (hover: none) { … }

फ़ायरफ़ॉक्स के अलावा, यह काफी अच्छी तरह से समर्थित है । सफारी और क्रोम मोबाइल उपकरणों पर सबसे आम ब्राउज़र होने के नाते, यह अधिक से अधिक गोद लेने को बर्दाश्त कर सकता है।

— Buzut
स्रोत

2

... और एफएफ के लिए आने वाले हफ्तों में भी समर्थन जारी रहेगा।

— रेट्रोवर्टिगो

5

यह काम करेगा। अगर यह मुझे पता नहीं है

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

संपादित करें: होवर ऑन-डिमांड अब समर्थित नहीं है

— aleksa_95
स्रोत

3

यह समाधान तब तक काम करेगा जब तक 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())
};

गोली भरना:

पुराना तरीका:

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

नया तरीका:

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

यदि डिवाइस में टच स्क्रीन है, तो उपरोक्त कोड "टैग को स्पर्श" वर्ग को बॉडी टैग में जोड़ देगा। अब आपके वेब एप्लिकेशन में कोई भी स्थान जहाँ आपके लिए css होगा: होवर आप कॉल कर सकते हैंbody:not(.is-touch) the_rest_of_my_css:hover

उदाहरण के लिए:

button:hover

हो जाता है:

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

यह समाधान मॉर्डनाइज़र का उपयोग करने से बचता है क्योंकि मॉर्डनाइज़र लिब एक बहुत बड़ा पुस्तकालय है। यदि आप सभी करने की कोशिश कर रहे हैं टच स्क्रीन का पता लगाने, यह सबसे अच्छा होगा जब अंतिम संकलित स्रोत का आकार एक आवश्यकता है।

— पैट्रिक डब्ल्यू मैकमोहन
स्रोत

0

JS या jQuery का उपयोग करके शरीर में एक क्लास टचस्क्रीन जोड़ना

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

— Matoeil
स्रोत

0

मैं इस मुद्दे को हल करने में सक्षम था

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

— रॉबिन मेहदी
स्रोत

FYI करें, on-demandकल्पना से और ब्राउज़र से हटा दिया गया है: github.com/w3c/csswg-drafts/commit/…

— retrovertigo