@ मीडिया न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई

225

मेरे पास यह @mediaसेटअप है:

HTML :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

सीएसएस :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

इस सेटअप के साथ यह iPhone पर काम करता है लेकिन यह ब्राउज़र में काम नहीं करता है।

क्या इसलिए कि मैं पहले से ही deviceमेटा में है, और शायद इसके max-width:480pxबजाय है?

css mobile media-queries

— rallybilen
स्रोत

1

व्हाट्स का मुद्दा - डिफ़ॉल्ट शैलियाँ 769 px से अधिक चौड़ी स्क्रीन पर लागू होंगी।

— गुरप्रीत सिंह

बस @media screen and (min-width:769px){अपने सामान्य ब्राउज़र शैलियों को हटा दें

— Zoltan Toth

ज़ोल्टन का क्या मतलब है? और मुझे लगता है कि मैं इसे हल कर सकता हूं। सबसे पहले, यह मुद्दा तब था जब मैंने अपने ब्राउज़र को अधिकतम डिवाइस के साथ आकार दिया था-इसके साथ यह फोन पर काम करता था लेकिन ब्रोसवर् में नहीं, "डिवाइस" के बिना यह दोनों में काम करता है।

— रैलीबिलीन

तो मूल रूप से "डिवाइस" के साथ यह मोबाइल / ब्राउज़र दोनों में काम करता है, लेकिन जब मैं डिवाइस जोड़ता हूं तो मैं इसे ब्राउज़र में नहीं देख सकता हूं

— rallybilen

1

यह 980pxनहीं होना चाहिए 960क्योंकि ब्राउज़र का आकार समाप्त होता है 980px।

339

मैंने पाया है कि सबसे अच्छा तरीका पुराने ब्राउज़र के लिए अपने डिफ़ॉल्ट सीएसएस को लिखना है, क्योंकि पुराने ब्राउज़र जिनमें 5.5, 6, 7 और 8 शामिल हैं। @media नहीं पढ़ सकते हैं। जब मैं @media का उपयोग करता हूं तो मैं इसे इस तरह उपयोग करता हूं:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

लेकिन आप अपने @media के साथ जो चाहें कर सकते हैं, यह केवल एक उदाहरण है कि मैंने सभी ब्राउज़रों के लिए शैलियों का निर्माण करते समय मेरे लिए सबसे अच्छा क्या पाया है।

iPad सीएसएस विनिर्देशों।

इसके अलावा! यदि आप प्रिंटबिलिटी की तलाश में हैं तो आप उपयोग कर सकते हैं@media print{}

— bashleigh
स्रोत

16

आपने have मैक ’स्क्रीन क्यों लगाई है? यह न केवल "अद्भुत" मैक है जिसमें बड़े उच्च रिज़ॉल्यूशन स्क्रीन हो सकते हैं!

— ल्यूक

38

अंतर्निहित समस्या max-device-widthबनाम सादे पुराने का उपयोग कर रही है max-width।

"डिवाइस" कीवर्ड का उपयोग स्क्रीन के भौतिक आयाम को लक्षित करता है, न कि ब्राउज़र विंडो की चौड़ाई को।

उदाहरण के लिए:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

बनाम

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

— jpostdesign
स्रोत

11

अगर वेबसाइट छोटे उपकरणों जैसे डेस्कटॉप स्क्रीन पर व्यवहार करती है तो आपको इस मेटा टैग को पहले हेडर में डालना होगा

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

मीडिया प्रश्नों के लिए आप इसे इस प्रकार सेट कर सकते हैं

यह आपके सभी मोबाइल / सेलफोन की चौड़ाई को कवर करेगा

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

IPad और iPad pro के लिए आपको उपयोग करना होगा

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

यदि आप लैंडस्केप मोड के लिए सीएसएस जोड़ना चाहते हैं तो आप इसे जोड़ सकते हैं

और (अभिविन्यास: परिदृश्य)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

— रोहित कौशिक
स्रोत

8

contentविशेषता के लिए सही मान initial-scaleइसके बजाय शामिल होना चाहिए :

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

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

— केसिया टिटोवा
स्रोत

2

यदि आप समझा सकते हैं कि क्यों और संदर्भ जोड़ते हैं, तो यह उत्तर को अधिक उपयोगी बना देगा।

— माइकल बेंजामिन

2

@Michael_B प्रारंभिक 'उपयोगकर्ता-मापनीय = नहीं' था। यह सब मुझे लगता है कि कहते हैं।

— अपोलो रेडोमर

0

कुछ iPhone के लिए आपको अपने व्यूपोर्ट को इस तरह रखना होगा

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

— NuggaN85
स्रोत