जावास्क्रिप्ट में स्क्रीन, विंडो और पेज का आकार: 5 घातक गलतियाँ और उनसे कैसे बचें

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

आकार मायने रखता है: स्क्रिप्ट्स लेआउट को क्यों "तोड़" देती हैं

\n\n

कल्पना करें: आप एक आदर्श अनुकूली वेबसाइट लिख रहे हैं, अपने लैपटॉप पर जाँच करते हैं — सब कुछ सही चल रहा है। आप इसे क्लाइंट के टैबलेट पर चलाते हैं — बग। तत्व एक-दूसरे पर चढ़ जाते हैं, मोडल विंडो स्क्रीन की सीमा से बाहर चली जाती है, और कोई गैलरी खुलने से ही मना कर देती है। परिचित लगता है?

\n\n

अक्सर इसकी जड़ स्क्रीन, ब्राउज़र विंडो या पेज के आकार का गलत तरीके से प्राप्त करना होता है। Stack Overflow पर "Get the size of the screen, current web page and browser window" प्रश्न ने सैकड़ों हज़ारों व्यूज़ प्राप्त किए हैं। और यह कोई संयोग नहीं है: अनुभवी डेवलपर्स भी screen.width, window.innerWidth और document.documentElement.clientWidth में भ्रमित हो जाते हैं।

\n\n

इस लेख में, हम जावास्क्रिप्ट में आकारों के साथ काम करते समय शुरुआती (और न केवल) द्वारा की जाने वाली 5 सबसे सामान्य गलतियों पर चर्चा करेंगे। आपको न केवल सिद्धांत मिलेगा, बल्कि वास्तविक कार्यों के लिए तैयार, सिद्ध समाधान भी मिलेंगे।

\n\n

जावास्क्रिप्ट में आकारों के साथ काम करते समय शीर्ष-5 गलतियाँ

\n\n

गलती नंबर 1: window.innerWidth के बजाय screen.width का उपयोग करना

\n\n

यह एक क्लासिक है। डेवलपर व्यूपोर्ट (viewport) की चौड़ाई जानना चाहता है और लिखता है:

\n\n

// ❌ गलत\nconst viewportWidth = screen.width;\nconsole.log(viewportWidth); // 1920 (लेकिन यह viewport नहीं है!)\n

\n\n

क्या है पेंच? screen.width मॉनिटर की भौतिक चौड़ाई पिक्सेल में लौटाता है। यदि आप ब्राउज़र विंडो को छोटा करते हैं या डेवलपर टूल खोलते हैं तो यह नहीं बदलता है। जबकि window.innerWidth व्यूपोर्ट (viewport) की चौड़ाई है, यानी विंडो का वह हिस्सा जहाँ कंटेंट प्रदर्शित होता है।

\n\n

यह साइट को कब तोड़ता है: यदि आप screen.width के आधार पर अनुकूली ब्लॉक की गणना करते हैं, तो DevTools खोलने या विंडो को छोटा करने पर साइट पुनर्व्यवस्थित नहीं होती है। उपयोगकर्ता या तो खालीपन देखता है या तत्वों का ओवरलैपिंग।

\n\n

// ✅ सही\nconst viewportWidth = window.innerWidth;\nconsole.log(viewportWidth); // दृश्य क्षेत्र की वर्तमान चौड़ाई\n

\n\n

गलती नंबर 2: स्क्रॉलबार (scrollbar) के बारे में भूलना

\n\n

दूसरी सबसे लोकप्रिय गलती। डेवलपर विंडो की ऊँचाई प्राप्त करता है और तत्व को बिल्कुल बीच में रखने का प्रयास करता है:

\n\n

// ❌ गलत\nconst windowHeight = window.innerHeight;\nelement.style.top = windowHeight / 2 + 'px';\n

\n\n

पहली नज़र में सब कुछ सही लगता है। लेकिन अगर कंटेंट स्क्रीन से लंबा है और स्क्रॉल बार है, तो window.innerHeight में इसकी ऊँचाई शामिल होती है। परिणामस्वरूप, तत्व दृश्य क्षेत्र की निचली सीमा से "बाहर" जा सकता है।

\n\n

समाधान: document.documentElement.clientHeight का उपयोग करें — यह स्क्रॉल बार के बिना व्यूपोर्ट की ऊँचाई लौटाता है।

\n\n

// ✅ दृश्य क्षेत्र में पोजीशनिंग के लिए सही\nconst viewportHeight = document.documentElement.clientHeight;\nelement.style.top = viewportHeight / 2 + 'px';\n

\n\n

\n
नियम याद रखें: window.innerWidth/innerHeight — स्क्रॉलबार सहित। document.documentElement.clientWidth/clientHeight — स्क्रॉलबार के बिना। कार्य के अनुसार चुनें।
\n

\n\n

गलती नंबर 3: विंडो के आकार और पेज के आकार में भ्रम

\n\n

आप जानना चाहते हैं कि उपयोगकर्ता ने कितना स्क्रॉल किया है, और पेज की कुल ऊँचाई की गणना करते हैं:

\n\n

// ❌ गलत\nconst pageHeight = window.innerHeight;\nconsole.log(pageHeight); // यह पेज की ऊँचाई नहीं है!\n

\n\n

window.innerHeight विंडो की ऊँचाई है, डॉक्यूमेंट की नहीं। पेज की पूरी ऊँचाई (स्क्रॉल किए गए भाग सहित) प्राप्त करने के लिए, document.documentElement.scrollHeight का उपयोग करें।

\n\n

वास्तविक उदाहरण: आप एक इनफ़िनिट स्क्रॉल (infinite scroll) बना रहे हैं। यदि आप नए पोस्ट लोड करने के क्षण को निर्धारित करने के लिए window.innerHeight का उपयोग करते हैं, तो स्क्रिप्ट एक बार काम करेगी और फिर कभी नहीं।