jquery $ (window) .width() और $ (window) .height() व्यूपोर्ट का आकार बदल नहीं होने पर विभिन्न मान वापस लौटाते हैं

Question

मैं jquery का उपयोग करके एक साइट लिख रहा हूं जो बार-बार $(window).width() और $(window).height() पर आधारित स्थिति और आकार तत्वों पर आधारित है व्यूपोर्ट आकार।

समस्या निवारण में मुझे पता चला कि व्यूपोर्ट का आकार बदलने पर उपरोक्त jquery कार्यों में बार-बार कॉल में मुझे थोड़ा अलग व्यूपोर्ट आकार रिपोर्ट मिल रही है।

आश्चर्य है कि कोई विशेष मामला है या नहीं, जब ऐसा होता है, तो यह होता है, या यदि यह वही तरीका है। रिपोर्ट किए गए आकारों में अंतर 20px या उससे कम है, ऐसा प्रतीत होता है। यह सफारी 4.0.4, फ़ायरफ़ॉक्स 3.6.2 और मैक ओएस एक्स 10.6.2 पर क्रोम 5.0.342.7 बीटा में होता है। मैंने अभी तक अन्य ब्राउज़रों का परीक्षण नहीं किया क्योंकि यह ब्राउज़र के लिए विशिष्ट नहीं प्रतीत होता है। मैं यह समझने में भी असमर्थ था कि अंतर क्या निर्भर करता है, यदि यह व्यूपोर्ट आकार नहीं है, तो क्या कोई अन्य कारक हो सकता है जिससे परिणाम अलग हो जाएं?

किसी भी अंतर्दृष्टि की सराहना की जाएगी।

---

अद्यतन:

यह $(window).width() और $(window).height() के मूल्यों है कि बदल रहे हैं नहीं है। यह उन चर के मान हैं जिनका उपयोग मैं उपरोक्त मानों को संग्रहीत करने के लिए कर रहा हूं।

यह स्क्रॉलबार नहीं है जो मानों को दोष दे रहे हैं, परिवर्तनीय मान बदलते समय कोई स्क्रॉलबार दिखाई नहीं देता है। मेरे चर में मूल्यों को संग्रहीत करने के लिए मेरा कोड यहां दिया गया है (जो मैं बस कर रहा हूं इसलिए वे कम हैं)।

(यह सब $(document).ready() के भीतर है)

// शुरू में चर घोषित भीतर .ready()

var windowWidth = $(window).width(); //retrieve current window width 
var windowHeight = $(window).height(); //retrieve current window height 
var documentWidth = $(document).width(); //retrieve current document width 
var documentHeight = $(document).height(); //retrieve current document height 
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position 
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position 


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll 

    windowWidth = $(window).width(); //retrieve current window width 
    windowHeight = $(window).height(); //retrieve current window height 
    documentWidth = $(document).width(); //retrieve current document width 
    documentHeight = $(document).height(); //retrieve current document height 
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position 
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position 

}; //end function onm_window_parameters() 

मैं मूल्यों के खिलाफ ऊपर चर जांच करने के लिए एक चेतावनी बयान डाला कार्यों otehr को दिखाई है कि वे होल्डिंग माना जाता है। $(item).param() मान लगातार बने रहते हैं, लेकिन मेरे चर उन कारणों से बदलते हैं जिन्हें मैं समझ नहीं सकता हूं।

मैंने उन स्थानों की तलाश की है जहां मेरा कोड प्रश्न में चर के मूल्य को बदल सकता है, क्योंकि उनके सेट मानों को पुनः प्राप्त करने के विपरीत और कोई भी नहीं ढूंढ सकता है। अगर यह संभावना है तो मैं पूरे शेबांग को कहीं भी पोस्ट कर सकता हूं।

Answer 1

मुझे लगता है कि आप जो देख रहे हैं वह स्क्रॉलबार की छिपाने और दिखाना है। Here's a quick demo showing the width change।

एक तरफ के रूप में: क्या आपको लगातार मतदान करने की आवश्यकता है? आप आकार बदलने के लिए अपने कोड को अनुकूलित करने में सक्षम हो सकते हैं, जैसे:

$(window).resize(function() { 
    //update stuff 
}); 

Answer 2

मुझे एक जैसी ही समस्या थी। जब मैं अपने पृष्ठ को रीफ्रेश करता था तो मुझे असंगत ऊंचाई() मान मिल रहा था। (यह समस्या का कारण बनने वाला मेरा चर नहीं था, यह वास्तविक ऊंचाई मान था।)

मैंने देखा कि मेरे पृष्ठ के प्रमुख में मैंने अपनी स्क्रिप्ट को पहले बुलाया, फिर मेरी सीएसएस फ़ाइल। मैंने स्विच किया ताकि सीएसएस फ़ाइल पहले से जुड़ी हो, फिर स्क्रिप्ट फाइलें और ऐसा लगता है कि अब तक समस्या ठीक हो गई है।

उम्मीद है कि मदद करता है।

Answer 3

कोशिश एक

• $(window).load घटना

या

• $(document).ready

  उपयोग करने के लिए है, क्योंकि प्रारंभिक मान क्योंकि परिवर्तन है कि पार्स के दौरान होने की अस्थिर हो सकता है या के दौरान डोम लोड

Answer 4

ध्यान दें कि यदि समस्या, प्रदर्शित होने स्क्रॉलबार की वजह से किया जा रहा है अपने सीएसएस में

body { 
    overflow: hidden; 
} 

डाल एक आसान से ठीक कर सकते हैं (यदि आप स्क्रॉल करने के लिए पेज की जरूरत नहीं है)।