मोबाइल सफारी सफेद पैडिंग/मार्जिन दाएं

Question

मैंने अन्य विषयों की जांच की है लेकिन मुझे यह पता लगाना प्रतीत नहीं होता है। इस साइट का परीक्षण यहां: http://www.mf.jlscs.com/

मोबाइल सफारी में पोर्ट्रेट दृश्य में, मैं रिक्त, सफेद पैडिंग के दाईं ओर स्क्रॉल कर सकता हूं। मुझे यह नहीं चाहिए।

परिदृश्य दृश्य में, यह स्क्रॉलिंग वहां नहीं है और यह मुझे पसंद है जैसा प्रस्तुत करता है।

मुझे नहीं पता कि इस रहस्यमय धक्का के कारण क्या हो रहा है। मैंने अतिप्रवाह-एक्स को खत्म करने की कोशिश की है, लेकिन यह चाल नहीं करता है। यदि मैं प्रत्येक कंटेनर पर ओवरफ्लो-एक्स को खत्म करता हूं, तो पृष्ठ में प्रत्येक कंटेनर के लिए यह वही प्रभाव होने की अनुमति है। कोई विचार?

Answer 1

यह शायद आपके शरीर की चौड़ाई को ओवरशूट करने वाले आपके संरचनात्मक तत्वों में से एक के कारण होता है। कोड की तलाश करें जो width: 100%; padding 20px; या कुछ ऐसा है जो इसे शूट कर देगा।

मैं सुझाव देता हूं कि सभी मुख्य divs पर लाल सीमा डालें और देखें कि अपराधी कौन सा है और किनारे तक फैला हुआ है।

Answer 2

मैं फ़ायरफ़ॉक्स के लिए वेब डेवलपर डाउनलोड करने और बस रूपरेखा> रूपरेखा ब्लॉक स्तर तत्वों को चालू करने का सुझाव दूंगा।

Answer 3

बस कुछ divs पर सीमा जोड़ने से लेआउट बदल सकता है। अपने सीएसएस की तह तक इस जोड़े दुष्ट तत्व को खोजने के लिए:

* { 
    background: #000 !important; 
    color: #0f0 !important; 
    outline: solid #f00 1px !important; 
} 

मैं भी एक बुकमार्कलेट कि जावास्क्रिप्ट के माध्यम से करता है तो यह आसानी से किसी भी साइट पर इस्तेमाल किया जा सकता बना दिया। http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Answer 4

दरअसल, यह समस्या "दुष्ट" तत्वों के कारण है जो किसी कारण से दस्तावेज़ चौड़ाई के बाहर विस्तार करती हैं।

एक विधि ऊपर सीएसएस का उपयोग करना है, कोशिश नहीं की है, लेकिन मुझे यकीन नहीं है कि सीमाओं का उपयोग कर तत्वों को स्पॉट करना कितना आसान होगा।

एक अलग दृष्टिकोण इस उन्हें खोजने के लिए कंसोल में कोड जेएस चलाने के लिए होगा:

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

यह (बाएं से दूरी) चौड़ाई + कौन सभी तत्वों की भरपाई की एक सरणी वापस आ जाएगी बड़ी हो गई हैं क्लाइंटविड्थ की तुलना में।

आपको तब तत्वों का निरीक्षण करने और यह पता लगाने की आवश्यकता होगी कि वे इस तरह क्यों व्यवहार कर रहे हैं - मेरे मामले में, पाद लेख width:100% और था, जिससे इसकी चौड़ाई दस्तावेज़ चौड़ाई से 20px बड़ी हो गई।

दिलचस्प बात यह है कि यह केवल iPhones पर देखा गया था, न कि एंड्रॉइड पर।