क्रोम डिवाइस मोड एमुलेशन मीडिया क्वेरी काम नहीं कर रही है

Question 1

किसी कारण डिवाइस इम्यूलेशन मोड मेरे मीडिया प्रश्नों को नहीं पढ़ रहा है। यह मेरी अपनी साइटों सहित अन्य साइटों पर काम करता है, जिन्हें मैंने बूटस्ट्रैप के साथ बनाया था, लेकिन यह उन मीडिया क्वेरी पर काम नहीं कर रहा है, जिनका उपयोग मैं स्क्रैच से कर रहा हूं (मीडिया क्वेरी बटन पर क्लिक करने से बटन नीला हो जाता है, लेकिन कोई मीडिया क्वेरी प्रदर्शित नहीं होती है)। नीचे फ़ाइल का परीक्षण करें। क्या यह Chrome में बग है या क्या मुझे अपनी फ़ाइल में कुछ बदलने की आवश्यकता है?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

Question 2

मैंने अपने पृष्ठ पर मेटा टैग जोड़कर इस समस्या को ठीक किया:

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

अद्यतन (दिसंबर 2019):

ऐसा लगता है कि आपको प्रारंभिक पैमाने और न्यूनतम पैमाने निर्धारित करने की आवश्यकता हो सकती है, जैसे:

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

Question 3

स्वीकृत उत्तर ने मेरे लिए ऐसा नहीं किया, मुझे इसके minimum-scale=1साथ ही जोड़ना था ।

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

Question 4

Chrome में डिवाइस एमुलेशन अभी भी एक WIP है। सच कहूं तो मुझे लगता है कि उन्होंने इसे जल्द ही क्रोम में धकेल दिया। अनुकरण का परीक्षण करने के लिए कैनरी (क्रोम बीटा ब्राउज़र) का उपयोग करने का प्रयास करें, मुझे लगता है कि यह क्रोम में एक से बेहतर तरीके से काम कर रहा है।

Question 5

मेरे लिये कार्य करता है।

बस अपने पृष्ठ के मुख्य भाग में एक व्यूपोर्ट मेटा टैग लगाएं। उदाहरण देखें:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Question 6

अपने कोड में इस मेटा टैग को शामिल करें:

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

स्निपेट का विस्तार करें

Question 7

जब तक मैंने देखा कि एक ही समस्या है, अगर मुझे स्क्रीन आकार के आधार पर नियमों के एक ही सेट के लिए एक से अधिक कार्यान्वयन हैं:

एक ही मीडिया क्वेरी के लिए न्यूनतम और अधिकतम चौड़ाई दोनों निर्दिष्ट करें ताकि यह बाद वाले द्वारा अधिलेखित न हो:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

या सभी को कम से कम एक ब्रेकपॉइंट सेट करें:

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

    some styles get applied : starting from this point ;

}

}

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

    some styles gets applied : starting from this point ;

}

}