jQuery/जेएस, आईओएस 4 और $ (दस्तावेज़) .height() समस्याएं

Question

मैंने वेबकिट ब्राउज़र के विभिन्न संस्करणों के साथ एक अजीब समस्या में भाग लिया है। मैं स्क्रीन के केंद्र पर एक तत्व स्थापित करने और गणना करने की कोशिश कर रहा हूं, मुझे विभिन्न आयामों, विशेष रूप से शरीर की ऊंचाई और स्क्रीन की ऊंचाई प्राप्त करने की आवश्यकता है। jQuery में मैं का उपयोग कर दिया गया है:

var bodyHeight = $('body').height(); 
var screenHeight = $(window).height(); 

मेरे पृष्ठ पर आमतौर पर वास्तविक व्यूपोर्ट की तुलना में काफी लंबी है, इसलिए जब मैं चेतावनी 'वे चर, bodyHeight बड़ी होने पहुंचना चाहिए, जबकि screenHeight स्थिर रहना चाहिए (की ऊंचाई ब्राउज़र व्यूपोर्ट)।

यह में सही है - फ़ायरफ़ॉक्स - क्रोम 15 (रुको जब Chrome संस्करण 15 के लिए मिलता था!?) - iOS5

पर सफारी

इस में काम नहीं कर रहा: - iOS4 पर सफारी - सफारी 5.0.4

पर बाद के दो, $(window).height(); हमेशा $('body').height()

में सोच रही थी यह शायद एक jQuery मुद्दा था के रूप में ही मान देता है, मैं ०१२३५४८४४५८ के लिए खिड़की ऊंचाई बदलीलेकिन यह भी वही काम करता है, जो मुझे लगता है कि यह वास्तव में कुछ प्रकार की वेबकिट समस्या है।

क्या कोई इस में भाग गया है और इस मुद्दे के आसपास एक रास्ता पता है?

चीजों को जटिल करने के लिए, मैं अलगाव में इसे दोहराने के लिए प्रतीत नहीं कर सकता। उदाहरण के लिए: http://jsbin.com/omogap/3 ठीक काम करता है।

मैंने यह निर्धारित किया है कि यह एक सीएसएस मुद्दा नहीं है, इसलिए शायद इस विशेष ब्राउज़र पर अन्य जेएस वर्किंग कहर है जिसे मुझे ढूंढना है।

Answer 1

मैं इसके साथ बहुत लंबे समय से लड़ रहा हूं (bug of my plugin की वजह से) और मुझे मोबाइल सफारी में विंडो की उचित ऊंचाई कैसे प्राप्त करने का तरीका मिला है।

यह ठीक से काम करता है इससे कोई फर्क नहीं पड़ता कि ज़ूम स्तर subtracting height of screen with predefined height of status bars (जो भविष्य में बदल सकता है) के बिना है। और यह आईओएस 6 फुलस्क्रीन मोड के साथ काम करता है।

(स्क्रीन आकार 320x480 के साथ iPhone पर, लैंडस्केप मोड में) कुछ परीक्षण:

// Returns height of the screen including all toolbars 
// Requires detection of orientation. (320px for our test) 
window.orientation === 0 ? screen.height : screen.width 


// Returns height of the visible area 
// It decreases if you zoom in 
window.innerHeight 


// Returns height of screen minus all toolbars 
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not 
// In fullscreen mode it always returns 320px. 
// Doesn't change when zoom level is changed. 
document.documentElement.clientHeight 

यहाँ कैसे ऊंचाई का पता चला है है:

var getIOSWindowHeight = function() { 
    // Get zoom level of mobile Safari 
    // Note, that such zoom detection might not work correctly in other browsers 
    // We use width, instead of height, because there are no vertical toolbars :) 
    var zoomLevel = document.documentElement.clientWidth/window.innerWidth; 

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height. 
    return window.innerHeight * zoomLevel; 
}; 

// You can also get height of the toolbars that are currently displayed 
var getHeightOfIOSToolbars = function() { 
    var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight(); 
    return tH > 1 ? tH : 0; 
}; 

इस तरह की तकनीक केवल एक ही है con: जब पेज ज़ूम किया जाता है तो यह पिक्सेल सही नहीं होता है (क्योंकि window.innerHeight हमेशा गोलाकार मान देता है)। जब आप शीर्ष बार में ज़ूम करते हैं तो यह गलत मान भी देता है।

इस सवाल से पूछने के बाद एक साल बीत गया, लेकिन फिर भी उम्मीद है कि इससे मदद मिलती है! :)

Answer 2

मुझे एक ही समस्या थी।, की परवाह किए बिना

ध्यान दें कि .height() हमेशा सामग्री ऊंचाई वापस आ जाएगी:

बॉक्स आकार CSS3 संपत्ति: .height() jQuery documentation मैंने पाया इस में यह 2 बात से कोई लेना देना था सीएसएस बॉक्स आकार बदलने की संपत्ति का मूल्य। JQuery 1.8 के रूप में, इसके लिए सीएसएस ऊंचाई प्लस बॉक्स-साइजिंग प्रॉपर्टी को पुनर्प्राप्त करने की आवश्यकता हो सकती है और उसके बाद प्रत्येक तत्व पर किसी भी संभावित सीमा और पैडिंग को घटाया जा सकता है जब तत्व बॉक्स-साइजिंग होता है: सीमा-बॉक्स। इस जुर्माना से बचने के लिए, .hess ("ऊंचाई") का उपयोग करें .height() के बजाय।

यह $('body').height() पर लागू हो सकता है।

दस्तावेज़ बनाम Window.load

$(document).ready() तैयार चलाया जाता है जब डोम जे एस के लिए तैयार है लेकिन यह संभव है कि छवियों अभी तक लोड नहीं हुआ है है। $(window).load() का उपयोग करके मेरी समस्या ठीक हुई। Read more।

मुझे उम्मीद है कि इससे मदद मिलती है।

Answer 3

एक क्रॉस ब्राउज़र समाधान सेट कर दिया जाता है कि इस प्रॉपर्टी jQuery

द्वारा

उपयोग: $(window).height()

यह एक पूर्णांक मान जो पिक्सल में ब्राउज़र के दृश्य स्क्रीन ऊंचाई के आकार का प्रतिनिधित्व करता है लौटने।

Answer 4

इस प्रयास करें:

var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height() 

Answer 5

यह 2015 है, अब हम iOS 8 पर हैं। आईओएस 9 पहले से ही कोने के आसपास है। और मुद्दा अभी भी हमारे साथ है। आह।

मैंने jQuery.documentSize में विंडो आकार के लिए एक क्रॉस-ब्राउज़र समाधान लागू किया है। यह किसी भी तरह के ब्राउज़र स्नीफिंग से स्पष्ट रहता है और भारी इकाई परीक्षण किया गया है।

• कॉल $.windowHeight()visual viewport की ऊंचाई के लिए: यहाँ यह कैसे काम करता है। सीएसएस पिक्सेल में वर्तमान ज़ूम स्तर पर वास्तव में व्यूपोर्ट में देखे जाने वाले क्षेत्र की ऊंचाई है।
• layout viewport की ऊंचाई के लिए $.windowHeight({ viewport: "layout" }) पर कॉल करें। वह ऊंचाई है जो दृश्य क्षेत्र 1: 1 ज़ूम पर होगा - "मूल विंडो ऊंचाई"।

बस अपने कार्य के लिए उपयुक्त व्यूपोर्ट चुनें, और आप कर चुके हैं।

दृश्यों के पीछे, गणना लगभग answer by @DmitrySemenov में उल्लिखित प्रक्रिया का पालन करती है। मैंने elsewhere on SO शामिल चरणों के बारे में लिखा है। यदि आप रुचि रखते हैं तो इसे देखें, या source code पर एक नज़र डालें।