HTML Navigator platform प्रॉपर्टी: ब्राउज़र प्लेटफ़ॉर्म जानकारी

HTML Navigator platform प्रॉपर्टी ब्राउज़र के संकलन प्लेटफ़ॉर्म (ऑपरेटिंग सिस्टम और आर्किटेक्चर) को दर्शाने वाली एक स्ट्रिंग लौटाती है। यह navigator.userAgent से OS जानकारी निकालने का सरल विकल्प है, लेकिन मानकीकृत नहीं है और मान ब्राउज़र/OS संयोजन के अनुसार भिन्न हो सकते हैं।

सिंटैक्स (Syntax)

navigator.platform

उदाहरण (Example)

यह उदाहरण प्लेटफ़ॉर्म स्ट्रिंग दिखाता है और सामान्य मानों की तालिका प्रदान करता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1.5rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover { background: #b01030; }
    .show {
      font-size: 1.2rem;
      color: #fff;
      margin-top: 1rem;
      background: rgba(0,0,0,0.3);
      padding: 1.5rem;
      border-radius: 10px;
      display: inline-block;
      min-width: 300px;
      text-align: left;
    }
    .platform-value {
      font-size: 1.8rem;
      font-weight: bold;
      color: #ffeb3b;
      font-family: monospace;
    }
    .platform-table {
      margin: 2rem auto;
      max-width: 700px;
      text-align: left;
      background: rgba(255,255,255,0.1);
      padding: 1.5rem;
      border-radius: 10px;
      color: #fff;
    }
    .platform-table table { width: 100%; border-collapse: collapse; }
    .platform-table th, .platform-table td { padding: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.2); }
    .platform-table th { color: #ffeb3b; }
    .platform-table code { background: rgba(0,0,0,0.3); padding: 0.2rem 0.5rem; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>HTML Navigator platform प्रॉपर्टी डेमो</h1>
  <button class="btn" onclick="showPlatform()">ब्राउज़र प्लेटफ़ॉर्म दिखाएं</button>
  <div class="show" id="platformDisplay"></div>

  <div class="platform-table">
    <h3>📋 सामान्य navigator.platform मान</h3>
    <table>
      <thead>
        <tr><th>प्लेटफ़ॉर्म स्ट्रिंग</th><th>ऑपरेटिंग सिस्टम</th><th>आर्किटेक्चर</th><th>नोट्स</th></tr>
      </thead>
      <tbody>
        <tr><td>Win32</td><td>Windows 32-bit</td><td>x86</td><td>64-bit Windows पर भी 32-bit ब्राउज़र के लिए</td></tr>
        <tr><td>Win64</td><td>Windows 64-bit</td><td>x64</td><td>64-bit ब्राउज़र पर</td></tr>
        <tr><td>MacIntel</td><td>macOS (Intel)</td><td>x64</td><td>इंटेल मैक पर सभी ब्राउज़र</td></tr>
        <tr><td>MacARM64</td><td>macOS (Apple Silicon)</td><td>ARM64</td><td>M1/M2/M3 मैक पर (नए ब्राउज़र)</td></tr>
        <tr><td>Linux x86_64</td><td>Linux 64-bit</td><td>x64</td><td>सबसे आम Linux मान</td></tr>
        <tr><td>Linux armv7l</td><td>Linux ARM 32-bit</td><td>ARM32</td><td>Raspberry Pi, आदि</td></tr>
        <tr><td>Linux aarch64</td><td>Linux ARM 64-bit</td><td>ARM64</td><td>ARM64 Linux डिवाइस</td></tr>
        <tr><td>iPhone</td><td>iOS (iPhone)</td><td>ARM</td><td>सभी iPhone ब्राउज़र (WebKit इंजन)</td></tr>
        <tr><td>iPad</td><td>iPadOS</td><td>ARM</td><td>iPad पर (डेस्कटॉप मोड में "MacIntel" हो सकता है)</td></tr>
        <tr><td>Android</td><td>Android</td><td>ARM/x86</td><td>आमतौर पर केवल "Linux armv7l" या "Linux aarch64"</td></tr>
      </tbody>
    </table>
  </div>

  <script>
    function showPlatform() {
      const platform = navigator.platform;
      const userAgent = navigator.userAgent;
      
      // अधिक विस्तृत OS जानकारी के लिए userAgent पार्स करें
      let osDetail = 'अज्ञात';
      if (userAgent.includes('Windows NT 10.0')) osDetail = 'Windows 10/11';
      else if (userAgent.includes('Windows NT 6.3')) osDetail = 'Windows 8.1';
      else if (userAgent.includes('Mac OS X')) {
        const match = userAgent.match(/Mac OS X ([\d_]+)/);
        osDetail = 'macOS ' + (match ? match[1].replace(/_/g, '.') : '');
      } else if (userAgent.includes('Linux') && !userAgent.includes('Android')) osDetail = 'Linux';
      else if (userAgent.includes('Android')) osDetail = 'Android ' + (userAgent.match(/Android (\d+\.\d+)/) ? userAgent.match(/Android (\d+\.\d+)/)[1] : '');
      else if (userAgent.includes('iPhone')) osDetail = 'iOS ' + (userAgent.match(/OS (\d+_\d+)/) ? userAgent.match(/OS (\d+_\d+)/)[1].replace(/_/g, '.') : '');
      else if (userAgent.includes('iPad')) osDetail = 'iPadOS ' + (userAgent.match(/OS (\d+_\d+)/) ? userAgent.match(/OS (\d+_\d+)/)[1].replace(/_/g, '.') : '');
      
      document.getElementById('platformDisplay').innerHTML = `
        <p>navigator.platform: <span class="platform-value">${platform}</span></p>
        <p>अनुमानित OS: <span class="platform-value">${osDetail}</span></p>
        <p><small>userAgent: ${userAgent.substring(0, 80)}...</small></p>
      `;
    }
  </script>
</body>
</html>

आउटपुट (Output)

"ब्राउज़र प्लेटफ़ॉर्म दिखाएं" बटन पर क्लिक:

परिणाम (उदाहरण: Windows पर 64-bit Chrome):

विस्तृत विश्लेषण

platform vs userAgent

आम समस्याएं और विचित्रताएं

• Win32 पर 64-bit Windows: 32-bit ब्राउज़र 64-bit Windows पर "Win32" रिपोर्ट करते हैं।
• iPad डेस्कटॉप मोड: iPadOS 13+ में डेस्कटॉप मोड सक्षम होने पर "MacIntel" रिपोर्ट कर सकता है।
• Android विविधता: कुछ ब्राउज़र "Linux armv7l" या "Linux aarch64" के बजाय "Android" रिपोर्ट करते हैं।
• वर्चुअल मशीन/कंटेनर: होस्ट OS के बजाय गेस्ट OS रिपोर्ट कर सकते हैं।

आधुनिक विकल्प: User-Agent Client Hints

// सुरक्षित संदर्भ (HTTPS) में उपलब्ध
if ('userAgentData' in navigator) {
  // निम्न एन्ट्रॉपी
  console.log(navigator.userAgentData.platform); // "Windows", "macOS", "Linux", "Android", "iOS"
  console.log(navigator.userAgentData.mobile);   // true/false
  
  // उच्च एन्ट्रॉपी (अनुमति/सुरक्षित संदर्भ आवश्यक)
  const data = await navigator.userAgentData.getHighEntropyValues([
    'platformVersion', 'architecture', 'model', 'bitness'
  ]);
  console.log(data.platformVersion); // "15.0.0"
  console.log(data.architecture);    // "x86", "arm"
}

उपयोग के मामले

1. प्लेटफ़ॉर्म-विशिष्ट निर्देश: "Cmd+C" बनाम "Ctrl+C" दिखाना।
2. डाउनलोड लिंक्स: सही इंस्टॉलर (.exe, .dmg, .apk, .deb) प्रदान करना।
3. फीचर उपलब्धता: कुछ API विशिष्ट प्लेटफ़ॉर्म पर सीमित (उदाहरण: Web Share API मोबाइल पर)।
4. एनालिटिक्स: प्लेटफ़ॉर्म वितरण ट्रैक करना।

सर्वोत्तम प्रथाएं

• फीचर डिटेक्शन पसंद करें: प्लेटफ़ॉर्म जांचने के बजाय, आवश्यक API जांचें ('launchQueue' in window)।
• फॉलबैक के रूप में उपयोग करें: जब फीचर डिटेक्शन अपर्याप्त हो।
• User-Agent Client Hints माइग्रेट करें: नए प्रोजेक्ट्स के लिए संरचित API का उपयोग करें।
• गोपनीयता: अनावश्यक प्लेटफ़ॉर्म लॉगिंग से बचें; GDPR/CCPA पर विचार करें।

ब्राउज़र समर्थन

सभी ब्राउज़र (Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, IE 4+, Opera 3+)।