आपने सुंदर 4K स्क्रीन वाला लैपटॉप ख़रीदा। फिर कोई वेबसाइट बताती है कि आपकी स्क्रीन का रेज़ोल्यूशन 1536 × 864 है, और आपको थोड़ा ठगा हुआ महसूस होता है। या आप डिज़ाइनर हैं, और क्लाइंट ज़ोर देता है कि साइट "उनके बड़े मॉनिटर पर टूटी दिखती है", जबकि उनकी स्क्रीन आपकी जितनी ही बड़ी है। या सपोर्ट आपसे आपका "स्क्रीन रेज़ोल्यूशन" माँगता है और आपको पक्का नहीं पता कि तीन संख्याओं में से कौन सी भेजें।
ये सारे पल एक ही वजह से आते हैं: "रेज़ोल्यूशन" शब्द का मतलब अलग-अलग जगह अलग होता है। जब आप फ़िज़िकल पिक्सेल, CSS पिक्सेल, व्यूपोर्ट और पिक्सेल रेशियो का अंतर समझ लेते हैं, तो उलझाने वाली संख्याएँ अचानक समझ में आने लगती हैं, और आपको ठीक-ठीक पता होता है कि कौन सी इस्तेमाल करनी है।
फ़िज़िकल पिक्सेल: स्क्रीन किससे बनी है
डिस्प्ले छोटी-छोटी रोशनियों का एक ग्रिड है जिन्हें पिक्सेल कहते हैं। "4K" स्क्रीन में चौड़ाई में 3840 और ऊँचाई में 2160 पिक्सेल होते हैं। Full HD स्क्रीन 1920 × 1080 की होती है। यह नेटिव या फ़िज़िकल रेज़ोल्यूशन है: पैनल पर बिंदुओं की असली संख्या, और वही संख्या जो डिब्बे पर दिखती है।
| नाम | फ़िज़िकल रेज़ोल्यूशन |
|---|---|
| HD (720p) | 1280 × 720 |
| Full HD (1080p) | 1920 × 1080 |
| Quad HD (अक्सर 2K कहा जाता है) | 2560 × 1440 |
| 4K Ultra HD | 3840 × 2160 |
आपकी स्क्रीन अपना पूरा रेज़ोल्यूशन क्यों नहीं बताती
अगर छोटी 4K लैपटॉप स्क्रीन पर सब कुछ एक इकाई के लिए एक फ़िज़िकल पिक्सेल से बनाया जाए, तो टेक्स्ट बहुत ही छोटा दिखेगा। इसलिए ऑपरेटिंग सिस्टम इंटरफ़ेस को स्केल करते हैं। 250% स्केलिंग पर 3840 पिक्सेल चौड़ी स्क्रीन ऐसे बर्ताव करती है जैसे वह 1536 पिक्सेल चौड़ी हो, और हर एलिमेंट बड़ा और ज़्यादा शार्प बनता है।
वेबसाइटें वही स्केल किया हुआ साइज़ देखती हैं। वेब की भाषा में इन स्केल की गई इकाइयों को CSS पिक्सेल कहते हैं, और आपका ब्राउज़र इन्हीं को स्क्रीन रेज़ोल्यूशन के रूप में बताता है। आपके लैपटॉप में कोई गड़बड़ी नहीं है: अतिरिक्त फ़िज़िकल पिक्सेल अब भी मौजूद हैं, जो टेक्स्ट और इमेज को ज़्यादा साफ़ बनाते हैं।
डिवाइस पिक्सेल रेशियो: दोनों के बीच का पुल
डिवाइस पिक्सेल रेशियो (DPR) एक दिशा में हर CSS पिक्सेल के लिए इस्तेमाल होने वाले फ़िज़िकल पिक्सेल की संख्या है।
- DPR 1: हर CSS पिक्सेल के लिए एक फ़िज़िकल पिक्सेल। पुराने और सस्ते मॉनिटर में आम।
- DPR 1.25 या 1.5: 125% या 150% स्केलिंग वाले Windows लैपटॉप में आम।
- DPR 2 या 3: Retina Mac और ज़्यादातर आधुनिक फ़ोन।
गणित सरल है: CSS रेज़ोल्यूशन × DPR = फ़िज़िकल रेज़ोल्यूशन। जो फ़ोन 3 के DPR के साथ 390 × 844 बताता है, उसका असली पैनल 1170 × 2532 का है।
व्यूपोर्ट: वेब पेज असल में कितनी जगह इस्तेमाल कर सकता है
व्यूपोर्ट ब्राउज़र विंडो के अंदर का वह हिस्सा है जहाँ पेज बनता है, टूलबार, टैब और स्क्रॉलबार को छोड़कर। जब भी आप विंडो का साइज़ बदलते हैं, साइडबार खोलते हैं, या पेज ज़ूम करते हैं, यह बदल जाता है।
वेबसाइट बनाने वाले किसी के लिए भी यह सबसे ज़रूरी संख्या है, क्योंकि रिस्पॉन्सिव लेआउट स्क्रीन पर नहीं, व्यूपोर्ट पर प्रतिक्रिया करते हैं। 1920 पिक्सेल चौड़े मॉनिटर पर आधी चौड़ाई वाला ब्राउज़र लगभग 950 पिक्सेल का व्यूपोर्ट देता है, और साइट अपना टैबलेट लेआउट दिखाएगी।
इससे सपोर्ट की एक पुरानी पहेली भी सुलझती है। "साइट मेरे मॉनिटर पर टूटी दिखती है" का मतलब अक्सर यह होता है कि ब्राउज़र विंडो मैक्सिमाइज़ नहीं है, या पेज 125% पर ज़ूम है, जिससे CSS पिक्सेल में व्यूपोर्ट छोटा हो जाता है।
कौन सी संख्या इस्तेमाल करें?
| हालात | जो संख्या मायने रखती है |
|---|---|
| मॉनिटर ख़रीदना, वॉलपेपर चुनना | फ़िज़िकल रेज़ोल्यूशन |
| रिस्पॉन्सिव वेबसाइट डिज़ाइन या टेस्ट करना | व्यूपोर्ट की चौड़ाई |
| हाई-DPI स्क्रीन के लिए शार्प इमेज तैयार करना | CSS साइज़ × DPR |
| गेमिंग और वीडियो प्लेबैक | फ़िज़िकल रेज़ोल्यूशन और रिफ़्रेश रेट |
| बग रिपोर्ट लिखना | सभी |
Screen Resolution Checker ये सब एक साथ, सीधे आपके ब्राउज़र से पढ़कर दिखाता है: CSS पिक्सेल में स्क्रीन रेज़ोल्यूशन, फ़िज़िकल पिक्सेल, व्यूपोर्ट, पिक्सेल रेशियो, आस्पेक्ट रेशियो (सटीक अनुपात के साथ 16:9 जैसे जाने-पहचाने नाम में), कलर डेप्थ और ओरिएंटेशन। यह आपका रिफ़्रेश रेट भी नापता है और HDR और वाइड-कलर सपोर्ट जाँचता है। Copy All सपोर्ट टिकट के लिए सब कुछ आपके क्लिपबोर्ड पर रख देता है।
रिफ़्रेश रेट: वह दूसरी संख्या जिसकी गेमर परवाह करते हैं
रेज़ोल्यूशन बताता है कि कितने पिक्सेल हैं; रिफ़्रेश रेट बताता है कि तस्वीर एक सेकंड में कितनी बार अपडेट होती है। सामान्य स्क्रीन 60 Hz पर चलती हैं, जबकि गेमिंग और हाई-एंड फ़ोन अक्सर 120 Hz, 144 Hz या उससे ज़्यादा पर चलते हैं, जिससे मूवमेंट ज़्यादा स्मूद लगता है।
एक हैरान करने वाली आम समस्या है नया हाई-रिफ़्रेश मॉनिटर 60 Hz पर चलना, क्योंकि सेटिंग कभी बदली नहीं गई या केबल ज़्यादा रेट सपोर्ट नहीं करती। इसे नापने में एक सेकंड लगता है, और अगर 144 के पैसे देने पर 60 दिखे, तो अपनी डिस्प्ले सेटिंग और केबल जाँचें।
मॉनिटर या लैपटॉप स्क्रीन चुनना
अगर आप स्क्रीन ख़रीद रहे हैं, तो रेज़ोल्यूशन का मतलब सिर्फ़ उसके साइज़ के साथ बनता है। वही 2560 × 1440, 27 इंच के मॉनिटर पर बेहद शार्प और 32 इंच पर फैलाने पर साफ़ तौर पर नरम दिखता है। मोटे तौर पर, बहुत लोगों को लगभग 24 इंच तक Full HD, 27 इंच पर Quad HD, और 27 इंच और उससे ऊपर 4K आरामदायक लगता है, जहाँ स्केलिंग टेक्स्ट को पढ़ने लायक साइज़ में रखते हुए कहीं ज़्यादा साफ़ बनाती है।
आस्पेक्ट रेशियो भी मायने रखता है। 16:10 लैपटॉप स्क्रीन डॉक्यूमेंट और कोड के लिए 16:9 से थोड़ी ज़्यादा ऊँचाई देती है, और अल्ट्रावाइड 21:9 मॉनिटर स्प्रेडशीट, वीडियो एडिटिंग और उन्हें सपोर्ट करने वाले गेम के लिए अच्छे हैं।
डिज़ाइनरों और डेवलपरों के लिए इसका मतलब
- डिवाइस के नामों के लिए नहीं, व्यूपोर्ट की चौड़ाई के लिए डिज़ाइन करें। हज़ारों डिवाइस हैं, लेकिन लेआउट को बस चौड़ाइयों की एक रेंज में काम करना है। लगभग 375, 768, 1024 और 1280 CSS पिक्सेल पर टेस्ट करें।
- हाई-DPI स्क्रीन को शार्प इमेज दें। 400 CSS पिक्सेल पर दिखने वाली इमेज को DPR 2 स्क्रीन पर साफ़ दिखने के लिए लगभग 800 फ़िज़िकल पिक्सेल चाहिए। बड़े वर्ज़न देने के लिए
srcsetइस्तेमाल करें, और Image Resizer से फ़ाइल साइज़ ठीक रखें। - जहाँ हो सके, वेक्टर ग्राफ़िक्स इस्तेमाल करें। SVG में आइकन और लोगो किसी भी पिक्सेल रेशियो पर बिल्कुल शार्प रहते हैं, और उन्हें CSS की कुछ लाइनों से एनिमेट भी किया जा सकता है, जैसा CSS से SVG एनिमेट करने पर हमारी गाइड दिखाती है।
- इमेज के लिए जगह पहले से रखें ताकि लोड होते समय लेआउट न उछले; हमारी Core Web Vitals गाइड बताती है कि लेआउट शिफ़्ट क्यों मायने रखते हैं।
- ज़ूम और एक्सेसिबिलिटी याद रखें। लोग आराम से पढ़ने के लिए पेज 150% या 200% तक ज़ूम करते हैं, जिससे व्यूपोर्ट बहुत छोटा हो जाता है। जो लेआउट छोटी चौड़ाई पर काम करता है, वह उनके लिए भी काम करता है।
मॉकअप बनाते समय Placeholder Image Generator असली इमेज आने से पहले सटीक साइज़ पर लेआउट टेस्ट करने में मदद करता है; हमारी प्लेसहोल्डर इमेज गाइड आम आयाम बताती है।
अक्सर उलझाने वाली बातें, अब साफ़
"मेरी 4K स्क्रीन 1536 चौड़ाई बताती है।" यह 250% पर स्केल की गई CSS चौड़ाई है। सारे फ़िज़िकल पिक्सेल अब भी इस्तेमाल हो रहे हैं।
"मेरे फ़ोन का रेज़ोल्यूशन सिर्फ़ 390 पिक्सेल है?" CSS पिक्सेल में, हाँ। 3 के DPR के साथ असली पैनल 1170 पिक्सेल चौड़ा है।
"ज़ूम करने पर व्यूपोर्ट क्यों बदलता है?" ज़ूम करने से हर CSS पिक्सेल बड़ा हो जाता है, इसलिए विंडो में कम पिक्सेल आते हैं।
"क्या कोई वेबसाइट मेरी स्क्रीन का साइज़ इंच में जान सकती है?" नहीं। ब्राउज़र फ़िज़िकल आयाम नहीं बताते, इसलिए किसी वेबसाइट पर इंच वाली कोई भी संख्या अनुमान है।
अगली सपोर्ट कॉल से पहले एक झटपट जाँच
अगली बार जब कोई आपका स्क्रीन रेज़ोल्यूशन पूछे, या आप कोई लेआउट टेस्ट कर रहे हों, तो Screen Resolution Checker खोलें, Copy All पर क्लिक करें और नतीजा पेस्ट करें। इससे सामने वाले को हर ज़रूरी संख्या मिल जाती है, और यह लंबी बहस बच जाती है कि उनका मतलब किस "रेज़ोल्यूशन" से था।
