2013-04-08 7 views
13

मैं वर्डप्रेस संचालित वेबसाइट का एक आईफोन संस्करण विकसित कर रहा हूं और मैं सोच रहा था कि आईफोन के लिए सफारी में वेबसाइट खुली होने पर क्षैतिज स्क्रॉलिंग को अक्षम करने का कोई तरीका है या नहीं। अभी, मैं विकास के माध्यम से आधा रास्ता हूं और यह जांचने के लिए कि क्या मैं क्षैतिज स्क्रॉलिंग अक्षम कर सकता हूं, मैंने स्क्रीन तत्वों से अधिक वाले तत्वों को छुपाया है, लेकिन फिर भी मैं दाईं ओर क्षैतिज स्क्रॉल कर सकता हूं। मैं <head> में <style> टैग के अंदर निम्नलिखित कोड डाल करने की कोशिश की, लेकिन वह मदद नहीं की:किसी आईफोन वेबसाइट पर क्षैतिज स्क्रॉल को अक्षम करना

शरीर {ओवरफ़्लो- एक्स: छिपा हुआ; }

मैं उपयोगकर्ता एक iPhone से वेबसाइट को देख रहा है, तो प्रतिध्वनित करने के लिए सिर फाइल के अंदर निम्नलिखित <meta> कोड डाल दिया है लेकिन यह केवल उपयोगकर्ता के बन्द रखो अर्थात आप ज़ूम नहीं कर सकते हैं और स्क्रीन के पास लाकर बाहर ज़ूम अक्षम करता है।

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

मैं वर्तमान में वेबसाइट की जाँच करने के लिए एक iPhone 4 का उपयोग कर रहा है और वेबसाइट के लिए इस लिंक पर जाकर पहुँचा जा सकता है: http://ignoremusic.com। आप लोगों से एक समाधान के लिए तत्पर हैं, धन्यवाद।

समाधान: @Riskbreaker ने सुझाव दिया, वहाँ कुछ तत्व है जो ~ 312px की चौड़ाई है जो अधिक थे क्यों मैं अभी भी कर सकते थे बाईं ओर और इस तरह के सभी तत्वों की चौड़ाई समायोजित करने के बाद कड़ी चोट, मैंने क्षैतिज स्वाइप अक्षम कर दिया। एक बात जो मैंने सीखा है वह है कि ओवरफ़्लो-एक्स एक आईफोन/आईपैड के मामले में मदद नहीं करता है, तो आपको स्क्रीन की चौड़ाई के सभी तत्वों की चौड़ाई को कम करना होगा अन्यथा आप अभी भी क्षैतिज स्वाइप करने में सक्षम हो।

+0

ताकि आपके "समाधान" खंड के अनुसार - क्या ऑफस्क्रीन तत्व होने पर क्षैतिज स्क्रॉल को अक्षम करने के लिए कोई तरीका है? –

उत्तर

9

जोड़ें इस तरह अपने शरीर पर overflows:

body { 
     font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif; 
     font-weight: normal; 
     overflow: hidden; 
     overflow-y: auto; 
     } 

और हाँ इस के साथ रहना: मैं जानता हूँ कि मैं पार्टी के लिए देर से एक छोटे से कर रहा हूँ

<meta name="viewport" content="width=device-width"> 
+0

आपके उत्तर के लिए धन्यवाद लेकिन सीएसएस कोड जोड़ना काम नहीं करता है, मैं अभी भी क्षैतिज स्क्रॉल कर सकता हूं। –

+1

क्या आप इसे style.css या अपने मुख्य सीएसएस पर जोड़ रहे हैं? इसके अलावा कुछ सीएसएस आपके उत्तरदायी में इस तरह अनदेखा कर रहे हैं: '#headertop {width: 980px;}' .... जो क्षैतिज होने के लिए क्षैतिज बना रहा है ... केवल एक उदाहरण जिसे पहले ठीक करने की आवश्यकता है ... – Riskbreaker

+0

यह जांचने के लिए कि यह काम करेगा या नहीं, मैंने इसे टैग के अंदर