स्क्रीन स्टाइलिंग

Question

आदर्श रूप से, मैं चाहता हूं कि पूरे इंटरफ़ेस में कस्टम स्टाइल है जो आईओएस (इटच/आईपैड) या वर्चुअल कीबोर्ड के साथ एंड्रॉइड समकक्ष पर दिखाई देता है। अधिक जानकारी के लिए नीचे देखें।

कीबोर्ड सेट होने पर कस्टम सेट सीएसएस हैकिंग नियम सक्रिय होने के लिए, एक स्वीकार्य समाधान भी है।

वेबसाइट (एचटीएमएल/जावास्क्रिप्ट/सीएसएस) पर एंड्रॉइड और आईओएस दोनों को लक्षित करता है, यह भी ध्यान रखें कि अंदर का लेआउट है: "तरल पदार्थ"।

संपादित करें: यह अधिक डिज़ाइन था, फिर टेक्स्ट; तो परिवर्तन विचलित नहीं हैं। निम्नतम स्तर पर, मैं केवल आभासी कुंजी (शायद केवल एक पृष्ठभूमि परिवर्तन) के साथ और बिना किसी डिज़ाइन परिवर्तन की इच्छा करता हूं।

प्रश्न, जिस पर यह एक अच्छा या बुरा डिजाइन विचार है, बहस योग्य है। हालांकि, मुझे लगता है कि सवाल के लिए अप्रासंगिक है। ऐसे शोषण के लिए टेक्स्ट और जैसे टेक्स्ट (जैसे गेम्स, या इंटरैक्टिव मीडिया) का उपयोग किया जा सकता है।

इसलिए बक्षीस: परियोजना के लिए उत्तर की आवश्यकता नहीं होने के बावजूद मैं काम कर रहा था (एक वैकल्पिक डिजाइन का उपयोग किया गया था)। मुझे अभी भी विश्वास है कि इस सवाल का जवाब देने से फायदा हो सकता है।

डिफ़ॉल्ट व्यवहार

     +--------+ 
         |  | 
+------------+  +-+-hidden-+-+ <- ~50% hidden 
| +--------+ |  | +--------+ | 
| |  | |  | |visible | | 
| |  | | \ | |  | | <- ~50% visible 
| | 100% | | ==> | +--------+ | 
| |  | | / | |virtual | | 
| |  | |  | | keys | | 
| +--------+ |  | +--------+ | 
+------------+  +------------+ 

वांछित व्यवहार

+------------+  +------------+ 
| +--------+ |  | +--------+ | 
| |  | |  | |visible | | <- 100% visible (example styling) 
| |  | | \ | |  | |  Custom Styling 
| | 100% | | ==> | +--------+ | 
| |  | | / | |virtual | | 
| |  | |  | | keys | | 
| +--------+ |  | +--------+ | 
+------------+  +------------+ 

Answer 1

मुझे यकीन है कि नहीं हूँ, यह वांछित प्रभाव है ?. इस लिंक

जाँच http://jsfiddle.net/UHdCw/3/

अद्यतन

(1)। डिवाइस ब्राउज़र पर चल रही एक वेबसाइट & मान लीजिए। फिर हम स्क्रीन आकार की जांच करके वर्चुअल कीबोर्ड की उपस्थिति की जांच कर सकते हैं। डिवाइस ब्राउज़र में

चेक - http://jsfiddle.net/UHdCw/8/show/

कोड: - http://jsfiddle.net/UHdCw/8/

(2)। यदि आप HTML5 & फोनगैप के साथ मूल ऐप बना रहे हैं, तो चीज़ें अलग-अलग होंगी। चूंकि कीबार्ड स्थिति की जांच करने के लिए कोई प्रत्यक्ष एपीआई हुक नहीं है, इसलिए हमें फोनगैप में हमारे own plugin लिखना होगा।

एंड्रॉइड में आप देशी कोड [check here] का उपयोग करके कीबोर्ड की शो/छुपा स्थिति देख सकते हैं। और उन कार्यक्रमों को हमारे एचटीएमएल में प्राप्त करने के लिए फोनगैप प्लगइन लिखना है।

[फोनगैप एक उदाहरण है।मुझे लगता है कि देशी चौखटे पर html के सबसे जैसा कि आपने कहा ऊंचाई/स्थिति में कोई बदलाव नहीं आया है जब कीबोर्ड मौजूद है मूल कोड के साथ

हुक करने]

आईओएस अद्यतन फेलिसिटी इस तरह का है। हम एक काम कर सकते हैं, जब इनपुट फोकस हो जाता है तो हम वर्ग को कम कर सकते हैं और तत्व आकार को कम कर सकते हैं। निम्नलिखित लिंक देखें।

http://jsfiddle.net/UHdCw/28/show/

Answer 2

मैं एक ही समस्या का सामना करना पड़ा, यह मेरे लिए काम करता है: एक इनपुट तत्व focus है जब

<!-- Android Viewport height fix--> 
<script type="text/javascript"> 
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile"); 
if(isAndroid) { 
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">'); 
} 
</script> 

Answer 3

Have जावास्क्रिप्ट शरीर करने के लिए एक वर्ग लागू होते हैं।

$("input, textarea").focus(function(){ $(document.body).addClass('when-keyboard-showing');  }); 
$("input, textarea").blur(function(){ $(document.body).removeClass('when-keyboard-showing'); }); 

और फिर मोबाइल दृश्य अगर निर्धारित करने के लिए @media प्रश्नों का उपयोग:

@media (max-width:550px) { 
    body.keyboard-up .header { height:0; padding:0; } 
} 

संयोजन आप पेज stylize जब कुंजीपटल, ऊपर है मोबाइल पर करने देगा। धन्यवाद।