2013-10-28 7 views
13

पर आता है मेरे पास नीचे एक दराज है जो नीचे स्थित है। टैप किए जाने पर, दराज स्लाइड हो जाएगा और अधिक सामग्री दिखाएगा। आईओएस 7 पर, जब उपयोगकर्ता इनपुट टैग या टेक्स्टरेरा टैग पर टैप करता है, तो वर्चुअल कीबोर्ड पॉप अप हो जाता है। हालांकि, जब कीपैड पॉप अप होता है तो ड्रॉवर नीचे की ओर चिपकने के बजाय पृष्ठ पर कूदता है। चित्रण के लिए नीचे दिए गए आरेख को देखें। enter image description hereआईओएस 7 क्रोम - फिक्स्ड पोजिशन ड्रॉवर नीचे नहीं रहता है जब वर्चुअल कीपैड

मैं सबसे पहले सफारी पर भी मुद्दे का सामना करना पड़ा है, लेकिन मैं पूर्ण करने के लिए तय की स्थिति बदलने के लिए जब कीपैड खुला है निम्नलिखित कोड कहा:

// Apple.Device detects if it is an apple device 
if (Modernizr.touch && Apple.Device) { 
    /* cache dom references */ 
    var $body = jQuery('body'); 

    /* bind events */ 
    $(document) 
    .on('focus', 'input, textarea', function(e) { 
     $body.addClass('fixfixed'); 
    }) 
    .on('blur', 'input, textarea', function(e) { 
     $body.removeClass('fixfixed'); 
    }); 
} 

सीएसएस कोड:

.fixfixed #drawer { 
    bottom: 0; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

यह फिक्स आईओएस 7 पर सफारी पर काम करता है लेकिन यह क्रोम पर काम नहीं करता है। इसके अलावा, एक बुना हुआ व्यवहार है:

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

मैं इस समस्या को कैसे हल कर सकता हूं? (मैं थोड़ी देर के लिए खोज कर रहा हूं लेकिन मैं आईओएस पर क्रोम कैसे डिबग करूं?)

आपकी मदद के लिए बहुत धन्यवाद!

अद्यतन

मैं अगर ऐसा है, मैं दराज छिपाने जब वर्चुअल कीबोर्ड निर्भर है कि यह iOS 7 पर Chrome है पता लगाने के लिए, और दराज जब आभासी फिर से प्रदर्शित निम्नलिखित कोड का उपयोग किया है कीबोर्ड नीचे है।

function iOSversion() { 
    if (/iP(hone|od|ad)/.test(navigator.platform)) { 
     // supports iOS 2.0 and later: <http://bit.ly/TJjs1V> 
     var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); 
     return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; 
    } 
} 

var iosVersion = iOSversion(); 

if (navigator.userAgent.match('CriOS') && iosVersion[0] == '7') { 
    $(document).hammer().on('tap', 'input, textarea', function(e) { 
      $('body').addClass('chromefixfixed'); 
     }) 
      .on('blur', 'input, textarea', function(){ 
       body.removeClass('chromefixfixed'); 
      }) 
} 

सीएसएस कोड:

.chromefixfixed #drawer { 
    display: none; 
} 

फिर भी प्रश्न बना रहता है: मैं कैसे (दराज छुपा जब कुंजीपटल निर्भर है) के बिना Android पर Chrome की तरह काम करने के लिए iOS 7 पर Chrome मिलता है?

सहायता के लिए धन्यवाद!

+0

'स्थिति: पूर्ण' से 'स्थिति बदलें: निश्चित' – Raptor

+0

कारण मैंने '.fixfixed' वर्ग का उपयोग किया है, यह है कि' स्थिति: निश्चित 'में आईओएस 7 पर क्रोम और सफारी पर ऊपर वर्णित एक ही समस्या है, जब वर्चुअल कीपैड खुलता है। '.fixfixed' का उपयोग करने के बाद और 'स्थिति में बदलना: पूर्ण' (केवल जब कीपैड ऊपर है), समस्या सफारी में हल हो गई है, लेकिन अभी भी क्रोम में मौजूद है। – Yunzhou

उत्तर

7

स्थिति निश्चित नीचे और स्थिति पूर्ण नीचे आईओएस और एंड्रॉइड डिवाइस पर एक पूर्ण दुःस्वप्न है, मेरे अनुभव में यह सबसे आधुनिक उपकरणों में लगातार प्रस्तुत करने के लिए संभव नहीं है, केवल पुराने लोगों को बाजार पर हावी होने दें वर्तमान में। इतना तो, कि एक देव के रूप में मैं एक डिजाइनर से इसके कारण लेआउट पर पुनर्विचार करने के लिए कहूंगा। मेरा मानना ​​है कि इसे "टर्ड को छेड़छाड़" कहा जाता है।

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