2011-10-19 20 views
24

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

निश्चित स्थिति navbar में एंकर लिंक पर टैप करने के बाद, यह सही ढंग से मुझे उस एंकर पर ले जाता है। हालांकि, जब तक मैं पृष्ठ को स्क्रॉल नहीं कर लेता तब तक मैं नेविबार में किसी भी अन्य लिंक पर क्लिक करने में असमर्थ हूं।

समस्या बूटस्ट्रैप अपने आप में प्रतीत होता है, के बाद से बूटस्ट्रैप साइट एक ही मुद्दा है: http://twitter.github.com/bootstrap/

कैसे इस के आसपास काम करने के लिए कोई सुझाव?


नीचे दिया गया कोड इस समस्या को पुन: उत्पन्न करता है। नोट करें कि यदि आप "टेस्ट जेएस" या "टेस्ट jQuery" (दो अलग-अलग प्रकार के स्क्रॉलिंग, सीधे जेएस, या jQuery आधारित) पर क्लिक करते हैं तो आप पृष्ठ को मैन्युअल रूप से स्थानांतरित करने के बाद तक फिर से क्लिक नहीं कर पाएंगे।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      #testDiv { 
       position: fixed; 
       bottom: 0; 
       right: 0; 
       background: gray; 
       padding: 20px; 
      } 
      #jsDiv, 
      #jQueryDiv { 
       width: 200px; 
       display: block; 
       height: 40px; 
       background-color: red; 
      } 
      #jQueryDiv { 
       background-color: yellow; 
      } 
     </style> 
     <script type="text/javascript"> 
      function testScroll() { 
       alert("JS"); 
       scroll(0, 5000); 
      } 
      function testjqScroll() { 
       alert("JQuery"); 
       $(window).scrollTop(500); 
      } 
     </script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script> 
    </head> 
<body> 
    <%for (int i = 0; i < 500; i++) {%> 
    Line <%=i%><BR/> 
    <%}%> 
    Bottom 
    <div id=testDiv> 
     <a id="jsDiv" href="#" onclick="testScroll();return false;">Test JS</a> 
     <a id="jQueryDiv" href="#" onclick="testjqScroll();return false;">Test jQuery</a> 
    </div> 
</body> 
</html> 
+1

मुझे एक ही समस्या है। अब तक कोई समाधान नहीं है। – Stuiterbal

+0

मेरे पास एक समान समस्या है। किसी को? – emilolsson

उत्तर

-2

मैं एक ही मुद्दा था:

यहाँ बुनियादी डेमो कोड (.jsp) है। आपको अपने <body> टैग या किसी भी तत्व को अपनी बार (navbar या topbar) से पहले padding-top कम से कम 40px लागू करने की आवश्यकता है।

33

मुझे आपका दर्द महसूस होता है। मैंने इसे कम करने के लिए कम से कम 6 घंटे बिताए। लेकिन मैंने कम से कम एक मीठा काम किया जो मेरे लिए काम करता था।

मेरे पास नेविगेशन के साथ एक निश्चित शीर्षलेख है जिसमें कई शीर्षलेख हैं। शरीर/एचटीएमएल नीचे नीचे स्क्रॉल करता है। (सामान्य)

एक नेविगेशन बटन पर क्लिक करने के बाद, पृष्ठ स्क्रॉल करता है और प्रभावी रूप से मेरे बटन को तब तक मार देता है जब तक कि मैं अपनी अंगुली से भौतिक रूप से अपने शरीर को फिर से स्क्रॉल नहीं करता। यह किसी भी तरह से मेरे बटन फिर से क्लिक करने योग्य बनाता है। मैंने सब कुछ करने की कोशिश की और कोई भी इसे हल नहीं कर पाया, या परिणाम साझा नहीं किया।

एचटीएमएल :: मेरी कंटेनर div के अंत में, मैं एक खाली div कहा, कोई ऊंचाई/चौड़ाई

<div id="device"></div> 

</div> <!--! end of #container --> 

js :: बस स्क्रॉल एनीमेशन से पहले, मैं देने के साथ 200px की div ऊंचाई।

$('#device').css('height', '200px');

तुरंत एनीमेशन की पूरी पर, मैं ऊंचाई दूर

$('#device').css('height', '0px');

कि यह है ले लो। मीठे हैक जादू। मुझे आशा है कि वह मदद करेंगे। यदि आप एक कामकाजी उदाहरण चाहते हैं, http://ryanore.com वर्तमान में मैं प्रगति पर हूं इसलिए मैं सामान्य रूप से इसके किसी भी लिंक को ड्राइव नहीं करता, लेकिन हे, यह एक अच्छे कारण के लिए है।

+1

यह ध्यान दिया जाना चाहिए कि वह संख्या '200 पीएक्स' मनमाने ढंग से थी और मेरी स्थिति में अच्छी तरह से काम करना प्रतीत होता था। जब तक आप काम नहीं करते हैं, तब तक आपको मूल्य के साथ बेकार होना पड़ सकता है। –

+0

एफडब्ल्यूआईडब्ल्यू, यह मेरे लिए काम नहीं करता है। इस तरह की एक कष्टप्रद बग! – weotch

+0

मेरे लिए काम किया, सबसे अच्छा तय वहाँ। धन्यवाद! – Mac

2

यहां एक समाधान है: http://xybrary.appspot.com/

मैं यह नहीं कह रहा कि यह सबसे अच्छा है लेकिन कुछ और बेहतर नहीं ढूंढ पाया। आईओएस 5.1 पर अपनी वेबसाइट पर जाकर @ रयान ओरे का समाधान करने की कोशिश की है और उसकी समस्या बिल्कुल तय नहीं है।

असल में, दो निश्चित नौसैनिक बनाए गए हैं, पहले एक निश्चित स्थान और एक बड़ा जेड-इंडेक्स, दूसरा, पूर्ण स्थान और निचला जेड-इंडेक्स (निश्चित रूप से, अलग सीएसएस वर्ग) के साथ बनाया गया है। तो मूल और डुप्लिकेट एक-दूसरे के शीर्ष पर स्तरित होते हैं।

+0

मुझे खुशी है कि आपने इसे वास्तव में पोस्ट किया है, मुझे यकीन नहीं है कि मेरा मेरे लिए और क्यों काम नहीं कर रहा है। मुझे लगता है कि मैंने अनजाने में अपना कोड गुमराह किया होगा। मुझे पता है कि यह थोड़ी देर के लिए बहुत अच्छा काम कर रहा था। वापस रिपोर्ट करेंगे। –

+0

हां, मैंने वास्तव में अपना सीएसएस गुमराह किया और अब फिर से काम कर रहा है। मुझे यकीन नहीं है कि यह आपके लिए क्यों काम नहीं कर रहा है, लेकिन मुझे खुशी है कि आपको एक और कामकाज मिला। मैंने कोशिश नहीं की है लेकिन हे, अगर यह बहुत बढ़िया काम करता है। –

+0

हमें @ रयान ओरे को बताने के लिए धन्यवाद। मुझे पूरा यकीन है कि लोग अब आपके दृष्टिकोण का अध्ययन कर सकते हैं और इसे पूरा कर सकते हैं, मैं खुद को देखता हूं और साथ ही मैं उत्सुक हूं। – Chris