JavaScript मोबाइल ब्राउज़र डिटेक्शन

JavaScript में मोबाइल ब्राउज़र का पता लगाने का कोड नीचे दिया गया है।

उदाहरण

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>मोबाइल डिटेक्शन</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } 
    .sample { font-size: 18px; font-weight: 500; } 
  </style> 
</head> 
<body> 
  <h1>मोबाइल ब्राउज़र का पता लगाना</h1> 
  <div class="sample"></div> 
  <button class="Btn">यहां क्लिक करें</button> 
  <h3>ऊपर दिए गए बटन पर क्लिक करके देखें कि यह मोबाइल डिवाइस है या नहीं</h3> 
  <script> 
    let fillEle = document.querySelector(".sample"); 
    document.querySelector(".Btn").addEventListener("click", () => { 
      var checkMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 
      if (checkMobile) { 
        fillEle.innerHTML = "यह एक मोबाइल डिवाइस है"; 
      } else { 
        fillEle.innerHTML = "यह मोबाइल डिवाइस नहीं है"; 
      } 
    }); 
  </script> 
</body> 
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

"यहां क्लिक करें" बटन पर क्लिक करने पर:

User Agent आधारित डिटेक्शन:

// मूल उदाहरण में उपयोग किया गया रेगुलर एक्सप्रेशन
/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)

// अधिक व्यापक पैटर्न
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

// टैबलेट अलग से डिटेक्ट करना
const isTablet = /iPad|Android(?!.*Mobile)/i.test(navigator.userAgent);

बेहतर आधुनिक दृष्टिकोण:

1. CSS Media Queries (पसंदीदा):

/* CSS में */
@media (max-width: 768px) { /* मोबाइल स्टाइल्स */ }
@media (hover: none) and (pointer: coarse) { /* टच डिवाइस */ }

2. JavaScript MatchMedia:

const isMobile = window.matchMedia('(max-width: 768px)').matches;
const isTouch = window.matchMedia('(pointer: coarse)').matches;

3. Navigator ऑब्जेक्ट (नया):

// User Agent Client Hints (आधुनिक, प्राइवेसी-फ्रेंडली)
navigator.userAgentData?.mobile; // boolean
navigator.userAgentData?.getHighEntropyValues(['platform', 'model']).then(data => {
  console.log(data.platform, data.model);
});

चेतावनी:

• User Agent स्पूफिंग - यूजर एजेंट स्ट्रिंग बदला जा सकता है
• मेंटेनेंस - नए डिवाइस आने पर रेगेक्स अपडेट करना पड़ता है
• फीचर डिटेक्शन बेहतर - डिवाइस डिटेक्शन के बजाय फीचर डिटेक्ट करें

सिफारिश:

फीचर डिटेक्शन का उपयोग करें (उदाहरण: 'ontouchstart' in window टच सपोर्ट के लिए) बजाय डिवाइस डिटेक्शन के। रिस्पॉन्सिव डिज़ाइन के लिए CSS Media Queries सबसे अच्छा है।