जेएस "विंडो" चौड़ाई-ऊंचाई बनाम "स्क्रीन" चौड़ाई-ऊंचाई?

Question

मैं एक छोटे से सोच रहा हूँ जब मैं इस कोड को देखो:

// Get the screen height and width 
var maskHeight = $(document).height(); 
var maskWidth = $(window).width(); 

... 

// Get the window height and width 
var winH = $(window).height(); 
var winW = $(window).width(); 

$(document).height(); और $(window).height(); के बीच क्या अंतर है?

Answer 1

$(document).height व्यूपोर्ट का आंतरिक क्षेत्र है, अनिवार्य रूप से आपके टूलबार/यूआरएल बार के नीचे से आपकी स्टेटस बार/नीचे स्क्रॉल बार/विंडो के नीचे। $(window).height विंडो की पूरी ऊंचाई प्राप्त करता है, जिसमें पता बार और स्क्रॉल बार जैसी चीजें शामिल हैं।

Answer 2

विंडो शीर्ष स्तर की क्लाइंट साइड ऑब्जेक्ट है, जिसमें दस्तावेज़ शामिल है। यह jsFiddle से पता चलता है कि दोनों $(window).height() और $(document).height() समान मान: http://jsfiddle.net/jackrugile/5xSuv/

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

Answer 3

@jackrugile द्वारा jsfiddle कोड दस्तावेज़ और विंडो के लिए समान मान देता है क्योंकि jsfiddle कोड iframe के अंदर चल रहा है।

चीजों को और अधिक स्पष्ट Iframes नहीं चल रहा है, तो बनाने के लिए -

• $ (विंडो) .height() व्यूपोर्ट क्षेत्र पृष्ठ पर मौजूद टूलबार में से किसी की ऊंचाई को छोड़कर की ऊंचाई वापस आ जाएगी। फ़ायरबग कंसोल (अगर फ़ायरफ़ॉक्स) या Google क्रोम कंसोल को एफ 12 कुंजी दबाकर और $ (विंडो) फायरिंग करके ही इसका प्रयोग किया जा सकता है। हाइट() जो ब्राउज़र से किसी भी टूलबार को जोड़ने/निकालने में हमेशा बदलता है या बस बदलता है फायरबग या क्रोम डीबगर की ऊंचाई।
  
  यह हमेशा आपके ब्राउज़र विंडो की ऊंचाई को सभी टूलबार की ऊंचाई को घटाएगा।
  
  
• $ (दस्तावेज़) .height() आपके पृष्ठ की सामग्री की ऊंचाई लौटाएगा, आपका पृष्ठ कितना समय होगा।
  टूलबार या ब्राउज़र विंडो की ऊंचाई (यदि पुन: आकार या नहीं) इसकी मान को प्रभावित नहीं करती है।
  मेरा जवाब पोस्ट करने से पहले यह क्रोम में 2407 और फ़ायरफ़ॉक्स में 2410 था।

आशा है कि इससे चीजों को और अधिक स्पष्ट करने में मदद मिलेगी।

Answer 4

स्क्रीन - आपकी स्क्रीन: आकार मान आपके मॉनीटर आकार के साथ बदलता है।

screen.availWidth //There is no screen.height 

विंडो या दस्तावेज़ - ब्राउज़र की खिड़की (ब्राउज़र व्यूपोर्ट, टूलबार और स्क्रॉलबार को छोड़कर)। यदि पृष्ठ स्क्रॉल करने योग्य है तो अदृश्य स्क्रोल करने योग्य भाग को अनदेखा करता है। IE9 और ऊपर के लिए 'विंडो' का उपयोग करें, यह सरल है।

window.innerHeight //IE9, Chrome, Safari, Firefox 
document.documentElement(or body).clientHeight //IE 8,7,6,5 

नोट: विंडो और दस्तावेज ही नहीं हैं। दस्तावेज़ ऑब्जेक्ट (डीओएम से) विंडो ऑब्जेक्ट (बीओएम से) की एक संपत्ति है। लेकिन एक ही आकार दें। डब्ल्यू 3 स्कूल्स से, मुझे लगता है कि 'विंडो' नए ब्राउज़र संस्करणों (आईई 9, क्रोम, फ़ायरफ़ॉक्स इत्यादि) के लिए संकेत है और 'दस्तावेज़' आईई 8,7,6,5 के लिए है।

http://www.w3schools.com/js/js_window.asp, और विभिन्न आकार के मॉनीटर पर एक सरल एएसपीएक्स पेज के साथ उपरोक्त परीक्षण भी किया।