सीएसएस मीडिया क्वेरी काम नहीं करेगा

Question

मैं की तरह कुछ कर रही मेरी सीएसएस दस्तावेज़ में एक मीडिया क्वेरी करने का प्रयास कर रखना:

@media screen and (max-device-width: 480px) { /*css here*/} 

लेकिन जब मैं एक iPhone पर उसकी जांच यह काम नहीं करेगा। मैंने आकार बदलने और पोर्ट्रेट/लैंडस्केप सुविधा का उपयोग करने की कोशिश की है, लेकिन अभी भी कुछ भी नहीं है। मैं क्या गलत कर रहा हूं?

Answer 1

जब मैं एचटीएमएल के सिर में सीएसएस को लिंक करता हूं तो मैं हमेशा कॉल करता हूं।

एक वर्तमान पृष्ठ से एक उदाहरण मैं पर काम कर रहा हूँ:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" /> 
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" /> 

यह सीएसएस दस्तावेज़ जिसे बजाय शैलियों चयन करने के बाद सीएसएस दस्तावेज़ लोड किया जाता है की शुरुआत से सही लोड किया जाएगा का चयन करता है (की संख्या कम कर देता है HTTP अनुरोध)

इसे सीएसएस दस्तावेज़ में ही करते समय, आपको आम तौर पर max-device-widthmax-width के साथ प्रतिस्थापित करना चाहिए।

Answer 2

उपयोग "अधिकतम-चौड़ाई" बजाय के "अधिकतम-उपकरण-चौड़ाई" डिवाइस प्रति तय हो गई है जो।

Answer 3

मुझे यकीन नहीं है लेकिन मुझे लगता है कि एक आईफोन का max-device-width 640px है। कोशिश करो।

Answer 4

@media only screen and (min-width : 480px) { 

} 

यह एंड्रॉइड और आईफोन दोनों में ठीक काम करता प्रतीत होता है।

Answer 5

इस

एक नमूने मीडिया क्वेरी सीएसएस

/************************************************************************************ 
smaller than 980 
*************************************************************************************/ 
@media screen and (max-width: 980px) { 
your css here 
} 

/************************************************************************************ 
smaller than 650 
*************************************************************************************/ 
@media screen and (max-width: 650px) { 
your css here 
} 
/************************************************************************************ 
smaller than 560 
*************************************************************************************/ 
@media screen and (max-width: 480px) { 
your css here 
} 

हार्ड को समझने के लिए के रूप में आप इस मेटा डेटा

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

Answer 6

नहीं जोड़ने से आम गलती लोग यह कर code..but प्रदान नहीं किया है है अपने दस्तावेज़ के सिर में जाँच करें कि आपके पास

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

गुड लक