प्रतिक्रियाशील और उपयोगकर्ता-अनुकूल वेब अनुप्रयोग बनाने के लिए आपके उपयोगकर्ता की स्क्रीन, ब्राउज़र विंडो और वेबपेज सामग्री के आयामों का सही-सही निर्धारण करना अत्यंत महत्वपूर्ण है। यह मार्गदर्शिका इन तीन अवधारणाओं के बीच के अंतर को स्पष्ट करती है और उनके संबंधित आकारों को प्राप्त करने के लिए विश्वसनीय जावास्क्रिप्ट विधियाँ प्रदान करती है।
विषय-सूची
- स्क्रीन, विंडो और वेबपेज आयामों के बीच अंतर को समझना
- जावास्क्रिप्ट के साथ स्क्रीन, विंडो और वेबपेज आयामों को प्राप्त करना
स्क्रीन, विंडो और वेबपेज आयामों के बीच अंतर को समझना
कोड में गोता लगाने से पहले, आइए स्पष्ट परिभाषाएँ स्थापित करें:
- स्क्रीन: उपयोगकर्ता के डिवाइस के संपूर्ण भौतिक प्रदर्शन क्षेत्र का प्रतिनिधित्व करता है। इसके आयाम मॉनिटर की कुल पिक्सेल गणना को दर्शाते हैं।
- विंडो: स्वयं ब्राउज़र विंडो को संदर्भित करता है—वह क्षेत्र जहाँ आपका वेबपेज प्रदर्शित होता है। यदि ब्राउज़र अधिकतम नहीं है, तो विंडो का आकार स्क्रीन के आकार से छोटा हो सकता है। इसमें ब्राउज़र क्रोम (टूलबार, मेनू, आदि) शामिल नहीं है।
- वेबपेज (दस्तावेज़): आपके वेबपेज की रेंडर की गई सामग्री को शामिल करता है। इसके आयाम सामग्री के आकार, लेआउट और स्टाइलिंग पर निर्भर करते हैं। यह ब्राउज़र विंडो से छोटा या बड़ा हो सकता है (स्क्रॉलबार के कारण)।
जावास्क्रिप्ट के साथ स्क्रीन, विंडो और वेबपेज आयामों को प्राप्त करना
यहाँ जावास्क्रिप्ट का उपयोग करके इन आयामों को प्राप्त करने का तरीका बताया गया है:
1. स्क्रीन का आकार
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
console.log(`Screen width: ${screenWidth} pixels`);
console.log(`Screen height: ${screenHeight} pixels`);
2. विंडो का आकार
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
console.log(`Window width: ${windowWidth} pixels`);
console.log(`Window height: ${windowHeight} pixels`);
3. वेबपेज (दस्तावेज़) का आकार
ब्राउज़र विसंगतियों के कारण वेबपेज के सटीक आयामों का निर्धारण करने के लिए अधिक मजबूत दृष्टिकोण की आवश्यकता होती है। निम्नलिखित फ़ंक्शन विभिन्न परिदृश्यों को संभालता है:
function getDocumentSize() {
const body = document.body;
const html = document.documentElement;
const docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
return { width: docWidth, height: docHeight };
}
const documentSize = getDocumentSize();
console.log(`Document width: ${documentSize.width} pixels`);
console.log(`Document height: ${documentSize.height} pixels`);
यह फ़ंक्शन ब्राउज़रों में भिन्नताओं के लिए विभिन्न गुणों पर विचार करता है और दृश्यमान दृश्य से परे क्षेत्रों सहित, रेंडर की गई सामग्री की अधिक सटीक माप सुनिश्चित करता है।
अंतर को समझने और इन जावास्क्रिप्ट विधियों का उपयोग करके, आप वेब अनुप्रयोग बना सकते हैं जो विभिन्न स्क्रीन आकारों और विंडो कॉन्फ़िगरेशन के अनुकूल आसानी से अनुकूलित होते हैं।