उत्तरदायी वेब डिज़ाइन के साथ मोबाइल वेब पर क्षैतिज स्क्रॉल से कैसे बचें?

Question

मेरे पास एक अनुकूलनीय वेब एप्लिकेशन है। क्षैतिज स्क्रॉल से बचने के लिए मैंने निम्नलिखित सीएसएस कोड लिखा है:

html { 
    overflow-x: hidden; } 

यह डेस्कटॉप पर ठीक काम करता है, लेकिन मोबाइल पर नहीं। यदि मैं मोबाइल डिवाइस पर ऐप प्रदर्शित करता हूं, तो ऐप ठीक से अनुकूल होता है। समस्या यह है कि जब मैं दाएं से बाएं स्क्रॉल करता हूं। पृष्ठ थोड़ा सा चलता है। मैं चाहता हूं कि पेज क्षैतिज न हो।

संपादित करें:

पृष्ठ सभी मोबाइल उपकरणों पर स्क्रॉल नहीं करता है। मैंने एंड्रॉइड के एक ही संस्करण के साथ दो उपकरणों पर कोशिश की है और यह केवल डिवाइसों में से एक पर स्क्रॉल करता है।

Answer 1

सभी पैडिंग की जांच करें। यदि आप 100% तक चौड़ाई वाले सेट पर पैडिंग जोड़ते हैं तो यह माता-पिता के बाहर जाएगा।

यहाँ दिखाया http://jsfiddle.net/wzZ3W/

कोड

<div id="fillX"> 
    <div id="childXFill"> 
    </div> 
</div> 

#fillX 
{ 
    background:red; 
    width:100%; 
    opacity:0.5; 
} 

#childXFill 
{ 
    background:blue; 
    width:100%; 
    padding:10px; 
    opacity:0.5; 
} 

इसके अलावा तत्वों कि पेज अवधि पर नकारात्मक बाएँ और दाएँ हाशिए की जाँच करें। जैसे http://jsfiddle.net/s7zrukj2/2/

इसके अलावा, एक सीएसएस रीसेट का उपयोग करें।

---

आप overflow: hidden का उपयोग करने के लिए wan't तो आप शायद यह शरीर तत्व पर भी स्थापित करना चाहिए। इसलिए

body, html { overflow-x:hidden; } 

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

Answer 2

तुम्हें यकीन माता पिता कंटेनर की चौड़ाई मोबाइल स्क्रीन आकार की तुलना में व्यापक नहीं है करने की आवश्यकता होगी

तो सबसे अच्छा शर्त सब कुछ के लिए% चौड़ाई का उपयोग करें और यह सुनिश्चित करें कि साथ बड़ा होगा कोई सामग्री तय किया है करने के लिए है मोबाइल स्क्रीन आकार की तुलना में

Answer 3

तो मोबाइल आप निम्न मेटा टैग का उपयोग करना चाहिए के लिए काम नहीं कर रहा:

<meta name="viewport" content="width=device-width, initial-scale = 1.0, 
maximum-scale=1.0, user-scalable=no" /> 

इस डिवाइस चौड़ाई में चौड़ाई सेट हो जाएगा।

Answer 4

अपने html शीर्षक पर अपने मोबाइल व्यूपोर्ट सेट

<meta name="viewport" content="width=device-width, initial-scale = 1.0,maximum-scale=1.0, user-scalable=no" /> 

सुनिश्चित करें कि आपके छिपाने डी अतिप्रवाह बनाने

body, html { overflow-x:hidden; }