इस्तेमाल करने का तरीका
- पेज खोलें। आपके ब्राउज़र से वैल्यू तुरंत पढ़ ली जाती हैं।
- Viewport size और orientation में बदलाव देखने के लिए विंडो का आकार बदलें या डिवाइस घुमाएँ।
- जानकारी को bug report या support request में चिपकाने के लिए “सब कॉपी करें” चुनें।
यह कैसे काम करता है
ब्राउज़र आकार CSS pixels में बताते हैं, यही वह इकाई है जिसका इस्तेमाल वेब पेज लेआउट के लिए करते हैं। हाई-डेंसिटी डिस्प्ले पर एक CSS pixel को दिखाने के लिए कई physical pixels का इस्तेमाल होता है: device pixel ratio (DPR) बताता है कि कितने। 390 × 844 बताने वाले और जिसका DPR 3 हो, ऐसे फ़ोन के पैनल में लगभग 1170 × 2532 device pixels होते हैं। डेस्कटॉप पर, ब्राउज़र zoom और ऑपरेटिंग सिस्टम की display scaling, दोनों DPR और CSS size बदलते हैं। इसलिए 125 % scaling वाला 2560 × 1440 मॉनिटर 2048 × 1152 बताता है।
Screen resolution पूरे डिस्प्ले का आकार है; उपलब्ध जगह में Windows taskbar या macOS menu bar जैसी हमेशा दिखने वाली ऑपरेटिंग सिस्टम की पट्टियाँ शामिल नहीं होतीं; viewport ब्राउज़र विंडो का वह हिस्सा है जहाँ पेज दिखता है—इसमें टूलबार नहीं, लेकिन scrollbar शामिल होता है। CSS media queries, जैसे min-width: 768px, viewport के अनुसार काम करती हैं। इसलिए responsive layout की जाँच करते समय यही आकार देखना चाहिए।
Colour scheme और reduced-motion की जानकारी उन्हीं CSS media features से मिलती है जिनका इस्तेमाल वेबसाइटें आपकी सिस्टम सेटिंग के अनुसार ढलने के लिए करती हैं। ब्राउज़र के ब्रांड, प्लेटफ़ॉर्म और मोबाइल की जानकारी User-Agent Client Hints से मिलती है, जो सिर्फ Chromium-आधारित ब्राउज़र देते हैं। Fingerprinting कम करने के लिए कुछ ब्राउज़र जान-बूझकर इन मानों को round करते हैं या तय मान दिखाते हैं, इसलिए ये आपके हार्डवेयर से पूरी तरह मेल नहीं खा सकते।
उदाहरण
Responsive layout की जाँच
किसी सहकर्मी के लैपटॉप पर लेआउट बिगड़ जाता है। वे जानकारी कॉपी करते हैं, जिसमें 1.5 DPR पर 1280 × 649 viewport दिखता है। समस्या को दोहराने के लिए अपने ब्राउज़र के device toolbar में वही viewport सेट करें।
इमेज का आकार चुनना
एक product image 400 CSS pixels चौड़ी दिखाई जाती है। DPR 3 वाले फ़ोन पर इसे साफ़ दिखने के लिए 1200 pixels चाहिए। इससे पता चलता है कि srcset में कौन-से आकार शामिल करने हैं।
मॉनिटर scaling की जाँच
3840 × 2160 का मॉनिटर, 1.5 DPR पर 2560 × 1440 बताता है: Windows डिस्प्ले को 150 % तक स्केल कर रहा है।
अक्सर पूछे जाने वाले सवाल
मेरे मॉनिटर के बताए गए resolution से screen resolution अलग क्यों है?
ब्राउज़र CSS pixels बताते हैं, जो scaling factor से भाग देने पर मिलने वाले physical pixels के बराबर होते हैं। हार्डवेयर के resolution का अनुमान लगाने के लिए इन्हें device pixel ratio से गुणा करें। ब्राउज़र zoom से भी दिखाई गई वैल्यू बदलती है।
Screen size और viewport size में क्या अंतर है?
Screen size पूरे डिस्प्ले का आकार है। Viewport ब्राउज़र विंडो के अंदर का सिर्फ वह हिस्सा है जहाँ पेज दिखता है, इसलिए यह छोटा होता है और विंडो का आकार बदलने या developer tools खोलने पर बदल जाता है।
क्या इस जानकारी का इस्तेमाल मुझे ट्रैक करने के लिए होता है?
इस पेज पर नहीं: वैल्यू सिर्फ आपको दिखाई जाती हैं, न तो सेव की जाती हैं और न ही कहीं भेजी जाती हैं। वेबसाइटें यही वैल्यू पढ़ सकती हैं, इसलिए fingerprinting को मुश्किल बनाने के लिए कुछ ब्राउज़र इन्हें round कर देते हैं।
मेरे लैपटॉप पर touch support क्यों दिखता है?
Touch support ब्राउज़र द्वारा बताई गई touch points की संख्या पर आधारित है। Touchscreen वाले लैपटॉप यह जानकारी देते हैं, भले ही आप ज़्यादातर mouse का इस्तेमाल करते हों। कुछ drivers या remote-desktop सेटअप भी touchscreen न होने पर touch support बताते हैं।
गोपनीयता
सभी वैल्यू आपके ब्राउज़र में JavaScript द्वारा पढ़ी जाती हैं और सिर्फ आपको दिखाई जाती हैं। कुछ भी सेव या अपलोड नहीं किया जाता और analytics में शामिल नहीं होता; सिर्फ टूल खोलने और इस्तेमाल करने की एक गुमनाम घटना रिकॉर्ड की जाती है।