2014-07-15 5 views
13

मैं एक उत्तरदायी वेबसाइट कर रहा हूं और मुझे यह समस्या है। जब तक मैं एक [इनपुट प्रकार = "पाठ"] का चयन नहीं करता तब तक सबकुछ ठीक से काम करता है और कीबोर्ड से बाहर आता है, पूरी साइट का आकार बदल जाता है, ऐसा लगता है कि स्क्रीन का आकार केवल कीबोर्ड के ऊपर का हिस्सा है। मैं सिर्फ उस सामान्य आकार को चाहता हूं। मैंने स्टैक ओवरफ्लो पर प्रस्तावित सभी समाधानों को भी एक अन्य मंच की कोशिश की है, बुन कुछ भी काम नहीं करता है।मोबाइल कीबोर्ड आकार बदलें

क्या किसी को यह ठीक करने के बारे में कोई विचार है?

<head> 
    <title>SchoolIn</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

//other code 

अद्यतन: मैं बेहतर समझाने की कोशिश करने जा रहा हूँ।

मैं एक सिर अनुभाग

//other code 
<div class="head"> 
    //Here is some text 
</div> 
//other code 

फिर एक सामग्री अनुभाग

//other code 
<div class="container"> 
    <div class="content"> 
    //other code 
    <input type="text" ...... /> 
    <input type="password" ..... /> 
    <input type="submit" ..... /> 
    </div> 
</div> 
//other code 

सभी तत्व प्रतिशत में हैं पिक्सल में कुछ नहीं है।

जब कीबोड हेडर से बाहर आता है, तो कंटेनर और सामग्री div redimensioned हैं, बजाय इनपुट फ़ील्ड और बटन नहीं। किसी भी मामले में वे अपने कंटेनर से बाहर निकले, क्योंकि कंटेनर छोटा हो जाता है और वे मूल आकार को बनाए रखते हैं। मुझे नहीं पता कि मैंने अपना आत्म स्पष्ट कर दिया है या नहीं।

प्रश्न वही है, जब मैं कुंजीपटल बाहर आता हूं तो मैं इसे मूल आकार में कैसे बना सकता हूं?

+0

आपने अपनी समस्या को कैसे ठीक किया? (मुझे लगता है कि मैंने आपके सभी संयोजनों को शामिल किया है, जिसमें आपकी शामिल है, लेकिन कोई सफलता नहीं है। :(- डैनियल एसआरपी) – user2360915

उत्तर

2
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 

एचटीएमएल के इस टुकड़े को आजमाएं। मैं इसे अपने प्रत्येक पृष्ठ के लिए उपयोग कर रहा हूं और यह हमेशा ऐसा करता है जो इसे करना चाहिए। शायद आपकी अनुपलब्ध न्यूनतम-स्तरीय विशेषता के कारण काम नहीं कर रहा है।

+0

मुझे लगता है कि मैंने आपके संभावित संयोजन को शामिल किया है, लेकिन आपकी कोई सफलता नहीं है।:( –

+6

यदि कोई सफलता नहीं है .. इसे स्वीकृत उत्तर के रूप में क्यों चिह्नित किया गया है? – Lee

+1

मेरे ऐप को सहेजने वाली रेखा का टुकड़ा। – tapaljor

1

ठीक है, मैंने इसे कम से कम भाग में काम किया है। मेरे लिए समस्या यह थी कि मैंने एचटीएमएल और बॉडी ऊंचाई 100% बना दी, इसलिए जब कीबोर्ड बाहर आता है तो ऊंचाई ऊपर का हिस्सा बन जाती है। अगर मैं कोई ऊंचाई घोषित नहीं करता हूं तो यह ठीक काम करता है।

html, body{ 
    height: 100%; 
} 

मैंने भाग में कहा क्योंकि मुझे डिवाइस की ऊंचाई की आवश्यकता है ताकि मैं पृष्ठ के अंदर तत्वों के साथ अनुपात बना सकूं। यदि मैं ऊंचाई की घोषणा नहीं करता हूं तो पृष्ठ की सामग्री कुछ स्मार्टफ़ोन में आधा स्क्रीन के लिए प्रदर्शित की जाएगी, अन्य मूल रूप से। मैंने मीडिया क्वेरी के साथ पहले ही ब्रेकिंग पॉइंट बनाये हैं, लेकिन मैं इसे प्रत्येक रिज़ॉल्यूशन के लिए नहीं बना सकता। मैंने कुछ श्रेणियां बनाई हैं (उदा: अधिकतम-चौड़ाई: 320 ---- न्यूनतम-चौड़ाई: 321, अधिकतम-चौड़ाई: 480 .... और इसलिए एक)।

ऊंचाई की समस्या को हल करने के तरीके पर फिर से कोई विचार?

+0

क्या आपको इसका कोई समाधान मिला? –

1

नहीं <meta name='viewport'/> या प्रतिशत फिक्स मेरे मामले (Android 2.3 ब्राउज़र) में काम किया है, इसलिए मैं इस सीएसएस के साथ समाप्त हो गया:

body { 
    min-height: 350px; 
} 

तुम भी height:auto के साथ कुछ भी करने के लिए ऐसा करने की जरूरत है।

यह एक हैक है, लेकिन कम से कम वेबसाइट इस किनारे के मामले में उपयोग करने योग्य बनाता है। जैसे ही उपयोगकर्ता ज़ूम करने का प्रयास करता है, यह इससे बाहर निकलता है।

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