स्क्रीन साइज़ डिटेक्टर

संदर्भ

व्यूपोर्ट बनाम स्क्रीन रिज़ॉल्यूशन — क्या अंतर है?

व्यूपोर्ट ब्राउज़र विंडो के अंदर वेब पेज का दृश्य क्षेत्र है, CSS पिक्सेल में मापा जाता है (window.innerWidth × window.innerHeight)। ब्राउज़र रीसाइज़ करने या DevTools खोलने पर यह बदलता है। स्क्रीन रिज़ॉल्यूशन आपके भौतिक डिस्प्ले की कुल पिक्सेल संख्या है (screen.width × screen.height) — यह आपके हार्डवेयर और डिस्प्ले सेटिंग द्वारा निश्चित है। रिस्पॉन्सिव वेब डिज़ाइन के लिए, व्यूपोर्ट महत्वपूर्ण है — यह निर्धारित करता है कि कौन से CSS मीडिया क्वेरी और ब्रेकपॉइंट सक्रिय हैं।

Device Pixel Ratio (DPR) क्या है?

Device Pixel Ratio (DPR) बताता है कि कितने भौतिक (हार्डवेयर) पिक्सेल एक CSS पिक्सेल से मैप होते हैं। 1 DPR का अर्थ 1:1 मैपिंग (मानक डिस्प्ले)। 2 DPR का अर्थ Retina/HiDPI डिस्प्ले — प्रत्येक CSS पिक्सेल 4 भौतिक पिक्सेल (2×2) से रेंडर होता है, तीखा टेक्स्ट और इमेज बनाता है। 3 DPR हाई-एंड स्मार्टफोन पर सामान्य है। यह महत्वपूर्ण है: उच्च-DPR स्क्रीन पर @2x/@3x इमेज सर्व करने, Retina डिस्प्ले पर स्क्रीनशॉट अपेक्षित रिज़ॉल्यूशन से दोगुने क्यों होते हैं समझने, और विशिष्ट DPR मानों पर दिखने वाली लेआउट समस्याओं को डीबग करने के लिए।

स्क्रीन डिटेक्शन के उपयोग

रिस्पॉन्सिव डिज़ाइन टेस्टिंग — DevTools खोले बिना सत्यापित करें कि CSS ब्रेकपॉइंट सही व्यूपोर्ट चौड़ाई पर फायर होते हैं। बग रिपोर्ट — डिस्प्ले समस्याओं की रिपोर्ट करते समय डेवलपर्स के साथ सटीक व्यूपोर्ट आयाम, स्क्रीन रिज़ॉल्यूशन और DPR साझा करें। स्क्रीनशॉट प्लानिंग — डॉक्यूमेंटेशन या ऐप स्टोर लिस्टिंग के लिए स्क्रीनशॉट लेने से पहले सटीक आयाम जानें। विज्ञापन और बैनर साइज़िंग — सत्यापित करें कि व्यूपोर्ट आयाम डिस्प्ले विज्ञापन के लिए आवश्यक विज्ञापन स्लॉट साइज़ से मेल खाते हैं।

गोपनीयता

स्क्रीन आयाम आपके ब्राउज़र API से स्थानीय रूप से पढ़े जाते हैं। कोई डेटा किसी सर्वर पर नहीं भेजा जाता।