2015-11-18 7 views
11

नीचे कोड में,व्यूपोर्ट बनाम विंडो बनाम दस्तावेज़

document.documentElement.clientWidth 
    1349 
document.documentElement.clientHeight 
    363 
window.innerWidth 
    1366 
window.innerHeight 
    363 
window.screen.height 
    768 
window.screen.width 
    1366 

तो, मेरे डेस्कटॉप स्क्रीन 1366 पिक्सल चौड़ा और 768 पिक्सल ऊंचाई है।

मुझे पता चला कि,

व्यूपोर्ट आयाम document.documentElement.clientWidth और document.documentElement.clientHeight का उपयोग कर भेजा जाता है।

विंडो आयामों को window.innerWidth और window.innerHeight का उपयोग करके संदर्भित किया जाता है।

1) व्यूपोर्ट और दस्तावेज़ के बीच क्या अंतर है?

2) window.onload बनाम document.onload आक्रमण किया जाता है?

+0

संबंधित: http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively – aug

उत्तर

11

जब आपका पृष्ठ आपकी स्क्रीन से बड़ा होता है तो चीजें अलग होती हैं।

व्यूपोर्ट आयताकार क्षेत्र है जहां चीजें आपको दिखाई देती हैं। दस्तावेज़ उस से बड़ा हो सकता है और यदि आप ऐसा करते हैं तो आपको स्क्रॉलबार दिखाई देंगे।

अपने दूसरे प्रश्न का सवाल है: window.onload vs document.onload

यहाँ एक सारांश है।

व्यूपोर्ट: यह आपकी डिवाइस स्क्रीन है।

विंडो: यह आपकी ब्राउज़र विंडो है। खिड़की व्यूपोर्ट या छोटे के रूप में बड़ा हो सकता है।

दस्तावेज़: यह वेबपृष्ठ है। यह व्यूपोर्ट से बड़ा या खिड़की से भी बड़ा हो सकता है।

नोट्स: कुछ वेबसाइटें मोबाइल के लिए नहीं बनाई गई हैं। इसलिए वेबपेज/दस्तावेज़ मोबाइल व्यूपोर्ट से काफी बड़ा है और आपको स्क्रीन के बाहर फैले हिस्सों को देखने के लिए स्वाइप करना होगा। डेस्कटॉप पर, आप व्यूपोर्ट/मॉनिटर के रूप में अपने ब्राउज़र की विंडो को छोटा या समान बना सकते हैं।

+1

यदि, * व्यूपोर्ट आयताकार क्षेत्र है जहां चीजें आपके लिए दिखाई देती हैं *, फिर, क्या व्यूपोर्ट और विंडो के बीच अंतर है? – overexchange

+1

@overexchange विंडो में व्यूपोर्ट के अलावा कई अतिरिक्त चीज़ें हो सकती हैं, जैसे स्क्रॉलबार, नेविगेशन बार इत्यादि। व्यूपोर्ट केवल दस्तावेज़ सामग्री प्रदर्शित करने वाला क्षेत्र है। आप 'window.innerWidth' और' window.outerWidth' की तुलना करके अंतर देख सकते हैं। – TwilightSun

+0

जो डिवाइस चौड़ाई और ऊंचाई के अलावा कुछ भी नहीं है। 'screen.width' और 'screen.height' – overexchange

4

दस्तावेज़:

दस्तावेज़ जावास्क्रिप्ट में एक वस्तु अपने पृष्ठ के डोम (दस्तावेज़ ऑब्जेक्ट मॉडल) का प्रतिनिधित्व करता है। दस्तावेज़ ऑब्जेक्ट आपकी संपूर्ण पृष्ठ संरचना का प्रतिनिधित्व है (सभी HTML तत्व इत्यादि।) इस हां, तो:

window.innerWidth 
window.innerHeight 

आप वास्तविक दिखाई देता है (:

इस का उपयोग करते हुए:

document.documentElement.clientHeight 
document.documentElement.clientWidth 

आप अपने <html> तत्व

व्यूपोर्ट की चौड़ाई दे दिया जाना चाहिए भौतिक) आपके ब्राउज़र के अंदर खिड़की के आयाम, स्क्रैप को छोड़कर ollbars

window.onload

window.onload (body.onload a.k.a) मुख्य HTML के बाद निकाल दिया जाता है, सभी सीएसएस, सभी छवियों और अन्य सभी संसाधनों को लोड और प्रस्तुत किए गए हों।

document.onLoad

बुलाया DOM के तैयार होने जो जब चित्र और अन्य बाह्य सामग्री लोड किए गए हैं करने से पहले हो सकता है कर रहा है।

+1

window.innerWidth स्क्रॉल बार शामिल है – Benn

संबंधित मुद्दे