2012-11-05 51 views
6

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

Here is the website। मैं बाएं और दाएं हाथ की ओर कुछ जगह रखना चाहता हूं, हालांकि मेरे पास सिर्फ एक कंटेनर नहीं है क्योंकि मुझे 100% स्क्रीन पर गहरे ग्रे बार की आवश्यकता होती है और हमेशा बैनर के नीचे कोई फर्क नहीं पड़ता कि यह कहां था। तो 4 "युक्त" divs हैं जिन्हें मैं अंतरिक्ष रखना चाहता हूं। मैंने सोम CSS3 मीडिया प्रश्नों को रखा है लेकिन अब मुझे दाईं ओर एक अंतर मिल रहा है। मैं सोच रहा था कि ऐसा इसलिए था क्योंकि मेरी पृष्ठभूमि मैग पूरी तरह से जा रही है लेकिन वे 100% पर सेट हैं इसलिए मुझे समझ में नहीं आता कि क्या हो रहा है। यह somethign सरल, मैं अभी नहीं दिखाई दे रहा है ..

यह है कि मैं क्या मीडिया के लिए प्रश्नों

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

#header, #banner, #main, #footer-widget-area { padding: 0 2em 0 2em; } 

} 

यह वही टी मेरे iPhone पर की तरह लग रहा है है

enter image description here

कोई सलाह सहायक और सराहना की है।

+0

@ambrealsweb आपको यह मिला कि मैं इसके बारे में क्या बात कर रहा हूं ......... –

उत्तर

3

viewport मेटा टैग में देखें। अपने पृष्ठ के <head> आप के लिए कोड जोड़ने के लिए थे, तो:

<meta name="viewport" content="width=1100"> 

कि iPhone की व्यूपोर्ट मजबूर होना पड़ा 1100px विस्तृत रेंडर करने के लिए। आईफोन पर डिफ़ॉल्ट व्यूपोर्ट 980 पीएक्स है, इसलिए आपका पृष्ठ यह दर्शा रहा था कि 100% चौड़ाई 980 पीएक्स थी और वास्तविक सामग्री की चौड़ाई नहीं थी।

व्यूपोर्ट मुश्किल हो सकता है, यहां इस पर कुछ अधिक जानकारी है:

Viewport meta tag for non-responsive design

+0

यह विकल्प मेरे लेआउट के लिए सबसे अच्छा काम करता है। धन्यवाद! – kia4567

0

मैं लाइव साइट की जाँच की, लगता है कि इस मुद्दे को सही पर अतिरिक्त स्थान का केवल 3 पिक्सल के लिए नीचे है। मैंने नेविगेशन मेनू में लाइन-ब्रेक भी देखा। यह निम्नलिखित के लिए स्मार्टफोन मीडिया क्वेरी को बदलने की तरह दिखता है पिछले मुद्दों को हल होगा:

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

#header, #main, #footer-widget-area { padding: 0 1em 0 1em; } 
#banner { padding: 0; } 
#header-right { width: auto; } 
#access .menu-header { width: auto; } 

h4 { font-size: 1.4em; line-height: 1em; } 
} 
0

कैसे इस बारे में:

#wrapper { padding:0 2em; margin:0 auto; overflow:hidden; height:auto; } 
#header, #content, #stuff, #etc { margin:0;padding:0; } 
#inside stuff { whatever else; } 

लपेटें #wrapper अपने सबसे बाहरी DIV (<body> और करीब सही होने के बाद चारों ओर </body> से पहले)।

जब तक आपकी योजना 2em पैडिंग क्षेत्र के बाहर कुछ तत्वों को स्थापित नहीं करती है, तो मैं कल्पना नहीं कर सकता कि यह आपकी समस्या का अधिक कुशल समाधान क्यों नहीं होगा।