उत्तरदायी डिजाइन - मीडिया क्वेरी आईफोन पर काम नहीं कर रही है?

मैं अपनी वेबसाइट का एक मोबाइल अनुकूल संस्करण बनाने की कोशिश कर रहा हूं, जिससे मेरी वेबसाइट एक छोटे से स्क्रीन आकार और उसके अनुसार स्केल कर सके।उत्तरदायी डिजाइन - मीडिया क्वेरी आईफोन पर काम नहीं कर रही है?

मैंने कुछ मीडिया प्रश्न बनाए हैं, जो किसी डेस्कटॉप पर आकार बदलने पर ब्राउज़र में सही तरीके से व्यवहार करते हैं।

मेरे आईफोन पर, सफारी सिर्फ पूरी वेबसाइट को कम कर देता है लेकिन फिर भी पूर्ण आकार की साइट के पहलू अनुपात को बनाए रखता है। मैं मीडिया क्वेरी को कैसे देख सकता हूं? क्या मुझे कुछ याद आया है?

यहाँ एक sandbox जो मैं सही ढंग से काम करने की कोशिश कर रहा हूँ के लिए एक लिंक है - कोई मदद या सुझाव की सराहना की कर रहे हैं:

http://www.preview.brencecoghill.com/

स्रोत

2012-10-21 Gearu

आप अपने html में अपने दृश्य पोर्ट के लिए मेटा है?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

अधिक यहाँ जानकारी: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

स्रोत

2012-10-22 00:09:42 coopersita

उत्तर के लिए आपको बहुत बहुत धन्यवाद .. यह जवाब मुझे बहुत मदद करता है .. लेकिन मेरे दोस्त को सुधारने में मेरा दोस्त coopersita .. आप अपने टैग पर "बंद" खो रहे हैं; –

एलओएल! इसे ठीक करें। धन्यवाद। – coopersita

मैंने कोशिश की गलत वाक्यविन्यास को ठीक करने के लिए इस उत्तर को संपादित करने के लिए, लेकिन इसे अस्वीकार कर दिया गया था। यह होना चाहिए (लगभग उपयोगकर्ता1506194 के उत्तर की तरह): '<मेटा नाम =" व्यूपोर्ट "सामग्री =" चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-पैमाने = 1.0 ">' – penfold

मुझे लगता है कि आप के साथ क्रोम में एक चेतावनी मिल जाएगा; बजाय, यह ठीक काम करना चाहिए:

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

स्रोत

2013-08-21 13:07:21

मैंने स्वीकार किए गए उत्तर को संपादित किया क्योंकि यह वाक्यविन्यास सही है। – penfold

मैं सिर्फ एक दिन के लिए इस एक ही समस्या के निवारण के बाद सबसे विचित्र बात का अनुभव किया। कोशिश करने के लिए कुछ और अगर विफल रहता है ...

मेरे पृष्ठ विकास के दौरान मेरे लैपटॉप पर पूरी तरह उत्तरदायी थे लेकिन मेरे आईफोन, आईपैड या सैमसंग पर नहीं। मैं अंत में पता चला मैं इस प्रकार का DOCTYPE बयान के बाद और html लैंग बयान से पहले एक टिप्पणी लाइन डालने के लिए, था:

<!DOCTYPE html> 
<!-- This comment line needed for bootstrap to work on mobile devices --> 
<html lang="en">

अंत में, अपने पृष्ठों मोबाइल उपकरणों पर उत्तरदायी थे। अजीब!

स्रोत

2018-03-03 23:16:34 Filemangler

उत्तरदायी डिजाइन - मीडिया क्वेरी आईफोन पर काम नहीं कर रही है?

उत्तर

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