मीडिया के प्रश्नों में "स्क्रीन" और "केवल स्क्रीन" के बीच अंतर क्या है?

Question

बीच क्या अंतर है screenऔर only screenमीडिया के प्रश्नों में?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

हमें उपयोग करने की आवश्यकता क्यों है only screen? क्या केवल स्क्रीन के लिए screenप्रदान की जाने वाली पर्याप्त जानकारी प्रदान नहीं करता है ?

मैंने इन तीन अलग-अलग तरीकों से किसी भी उत्तरदायी वेबसाइट का उपयोग किया है:

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

Answer 1

आइए एक-एक करके आपके उदाहरणों को तोड़ते हैं।

@media (max-width:632px)

यह एक max-width632px की विंडो के साथ कह रहा है जिसे आप इन शैलियों को लागू करना चाहते हैं। उस आकार में आप ज्यादातर मामलों में डेस्कटॉप स्क्रीन की तुलना में कुछ भी छोटी बात कर रहे होंगे।

@media screen and (max-width:632px)

यह एक डिवाइस के लिए कह रहा है जिसमें एक screenऔर max-width632px के साथ एक विंडो शैली लागू होती है। यह ऊपर दिए गए लगभग समान है सिवाय इसके कि आप अन्य उपलब्ध मीडिया प्रकारों के screenविपरीत निर्दिष्ट कर रहे हैं जो कि सबसे आम है ।print

@media only screen and (max-width:632px)

यहाँ यह समझाने के लिए W3C से सीधे एक उद्धरण है।

'केवल' कीवर्ड का उपयोग पुराने उपयोगकर्ता एजेंटों से स्टाइल शीट को छिपाने के लिए भी किया जा सकता है। उपयोगकर्ता एजेंटों को 'केवल' के साथ शुरू होने वाले मीडिया प्रश्नों को संसाधित करना होगा जैसे कि 'केवल' कीवर्ड मौजूद नहीं था।

जैसा कि केवल "केवल" के रूप में ऐसा कोई मीडिया प्रकार नहीं है, पुराने ब्राउज़र द्वारा स्टाइल शीट को अनदेखा किया जाना चाहिए।

यहां उस उद्धरण का लिंक दिया गया है जो उस पृष्ठ पर उदाहरण 9 में दिखाया गया है।

उम्मीद है कि यह मीडिया के सवालों पर कुछ प्रकाश डालता है।

संपादित करें:

बाहर की जाँच के लिए सुनिश्चित करें उत्कृष्ट जवाब @hybrids कैसे पर onlyकीवर्ड वास्तव में नियंत्रित किया जाता है।

Comments

किसी को जो की एक बेहतर विवरण के लिए देख रहा था के लिए क्योंonly कीवर्ड पुराने ब्राउज़र से स्टाइल शीट छुपा देगा, नीचे @hybrid द्वारा उत्तर देखें। वह इसे बहुत अच्छी तरह से समझाता है।

— JMTyler

हाइब्रिड का उत्तर अच्छा है, लेकिन मुझे यह उत्तर भी पसंद है क्योंकि यह सीएसएस के अंदर मीडिया प्रश्नों को संबोधित करता है क्योंकि यह केवल तत्व की mediaविशेषता को संबोधित करता linkहै।

— ०५ पर छारवे

क्या डिवाइस एक स्क्रीन नहीं है?

— 1930 पर कोकोडको

@ Kokodoko वाले जिन्हें एक की जरूरत नहीं है। लेकिन गंभीरता से, प्रिंटर और स्क्रीन पाठकों के पास जरूरी नहीं कि स्क्रीन हो। वर्तमान में या भविष्य में और कुछ भी नहीं screenजो अन्य मीडिया प्रकारों में सूचीबद्ध किसी भी चीज़ के रूप में पहचान नहीं करता है ।

— मैथ्यू ग्रीन

सामग्री और प्रस्तुति के बीच चिंताओं को अलग करने के लिए @Kokodoko CSS मौजूद है। प्रस्तुति स्क्रीन पर देखी जा सकने वाली चीज़ों की तुलना में बहुत अधिक है। यह ध्यान में रखना एक महत्वपूर्ण अंतर है कि आप क्या डिजाइन कर रहे हैं।

— मैथ्यू ग्रीन

Answer 2

निम्नलिखित एडोब डॉक्स से है ।

---

मीडिया क्वेरीज़ विनिर्देश कीवर्ड भी प्रदान करता है only, जिसका उद्देश्य पुराने ब्राउज़रों से मीडिया क्वेरीज़ को छिपाना है। जैसे not, कीवर्ड को घोषणा की शुरुआत में आना चाहिए। उदाहरण के लिए:

media="only screen and (min-width: 401px) and (max-width: 600px)"

मीडिया के प्रश्नों को न पहचानने वाले ब्राउज़रों को मीडिया प्रकारों की अल्पविराम से अलग सूची की अपेक्षा होती है, और विनिर्देश कहते हैं कि उन्हें पहले गैर-अल्फ़ान्यूमेरिक वर्ण से पहले प्रत्येक मान को अलग करना चाहिए जो एक हाइफ़न नहीं है। इसलिए, एक पुराने ब्राउज़र को पूर्ववर्ती उदाहरण की व्याख्या इस प्रकार करनी चाहिए :

media="only"

क्योंकि इस तरह का कोई मीडिया प्रकार नहीं है, इसलिए स्टाइलशीट को अनदेखा किया जाता है। इसी तरह, एक पुराने ब्राउज़र को व्याख्या करनी चाहिए

media="screen and (min-width: 401px) and (max-width: 600px)"

जैसा

media="screen"

दूसरे शब्दों में, इसे सभी स्क्रीन उपकरणों के लिए शैली नियम लागू करना चाहिए, भले ही यह नहीं पता हो कि मीडिया के प्रश्नों का क्या मतलब है।

दुर्भाग्य से, IE 6–8 विनिर्देश को सही ढंग से लागू करने में विफल रहा।

सभी स्क्रीन उपकरणों पर शैलियों को लागू करने के बजाय, यह पूरी तरह से स्टाइल शीट की उपेक्षा करता है।

इस व्यवहार के बावजूद, यह अभी भी मीडिया के सवालों के पहले से ही उपसर्ग करने की सिफारिश की जाती है यदि आप अन्य, कम सामान्य ब्राउज़रों से शैलियों को छिपाना चाहते हैं।

---

तो, का उपयोग कर

media="only screen and (min-width: 401px)"

तथा

media="screen and (min-width: 401px)"

IE6-8 में समान प्रभाव होगा: दोनों उन शैलियों का उपयोग करने से रोकेंगे। हालाँकि, उन्हें अभी भी डाउनलोड किया जाएगा।

इसके अलावा, CSS3 मीडिया प्रश्नों का समर्थन करने वाले ब्राउज़रों में, दोनों संस्करण शैलियों को लोड करेंगे यदि व्यूपोर्ट की चौड़ाई इससे अधिक है 401pxऔर मीडिया का प्रकार स्क्रीन है।

मुझे पूरी तरह से यकीन नहीं है कि CSS3 मीडिया प्रश्नों का समर्थन करने वाले कौन से ब्राउज़र को onlyसंस्करण की आवश्यकता होगी

media="only screen and (min-width: 401px)" 

विरोध के रूप में

media="screen and (min-width: 401px)"

यह सुनिश्चित करने के लिए कि इसकी व्याख्या नहीं की गई है

media="screen"

यह डिवाइस लैब तक पहुंच रखने वाले किसी व्यक्ति के लिए एक अच्छा परीक्षण होगा।

Comments

इसलिए यदि हम CSS फाइलों में मीडिया के प्रश्नों के बारे में बात कर रहे हैं, तो हम "केवल" छोड़ सकते हैं, क्योंकि पुराने ब्राउज़र मीडिया के प्रश्नों को समझ नहीं पाते हैं, क्या हम कर सकते हैं?

— 1234ru

अच्छा, बहुत स्पष्ट जवाब। धन्यवाद!

— अलेक्जेंडर सुरफेल

लिंक साझा वास्तव में मददगार था। धन्यवाद

— राफेल

मेरे अनुभव के अनुसार, सिम्बियन ओएस (पुराने नोकिया टच फोन) पर "केवल" अपेक्षित रूप से काम कर रहा है। मैंने इसका बहुत उपयोग किया क्योंकि उन ब्राउज़र CSS3 समर्थन में वास्तव में खराब थे, लेकिन यह अभी भी मीडिया प्रश्नों में "केवल" और "न्यूनतम / अधिकतम-चौड़ाई" को संभालने में सक्षम था।

— पीटर नट

@PeterKnut आप ऐसे पुराने उपकरणों का समर्थन क्यों कर रहे हैं? वास्तव में जिज्ञासु।

— प्रोमेथियस

Answer 3

छोटे स्‍क्रीन वाले कई स्‍मार्टफोन के लिए शैली के लिए, आप लिख सकते हैं:

@media screen and (max-width:480px) { … } 

पुराने ब्राउज़र को iPhone या Android फ़ोन शैली पत्रक देखने से रोकने के लिए, आप लिख सकते हैं:

@media only screen and (max-width: 480px;) { … } 

अधिक http://webdesign.about.com/od/css3/a/css3-media-queries.htm के लिए यह लेख पढ़ें

Comments

मैं अभी भी इस पर बहुत स्पष्ट नहीं हूं। मैंने अपना प्रश्न भी अपडेट कर दिया है। क्या आप कोई उदाहरण दे सकते हैं?

— जितेंद्र व्यास

यदि आप Mobile First दृष्टिकोण का उपयोग करते हैं तो क्या होगा? इसलिए, हमारे पास पहले मोबाइल सीएसएस है और फिर बड़ी साइटों को लक्षित करने के लिए न्यूनतम चौड़ाई का उपयोग करें। हमें onlyउस संदर्भ में कीवर्ड का उपयोग नहीं करना चाहिए , है ना?

— Ashitaka

इस उत्तर को समझना आसान था! :) केवल पुराने संस्करणों जैसे IE 6 या ओपेरा 5 या 6 को उन डेटा को लोड करने से रखना है जो Android या Chrome 30 या IE 10. के लिए प्रस्तुत किए जाने हैं। उत्तर का उत्तर संदीप :) a +1

— Afzaal अहमद ज़ीशान

Answer 4

@Hybrid द्वारा उत्तर काफी जानकारीपूर्ण है, सिवाय इसके कि @ashitaka द्वारा उल्लिखित उद्देश्य स्पष्ट नहीं करता है "क्या होगा यदि आप मोबाइल पहले दृष्टिकोण का उपयोग करते हैं? तो, हमारे पास पहले मोबाइल सीएसएस है और फिर बड़ी साइटों को लक्षित करने के लिए न्यूनतम चौड़ाई का उपयोग करें। हमें उस संदर्भ में एकमात्र कीवर्ड का उपयोग नहीं करना चाहिए? "

यहां जोड़ना चाहते हैं कि उद्देश्य केवल गैर-सहायक ब्राउज़रों को उस अन्य डिवाइस शैली का उपयोग करने से रोकने के लिए है जैसे कि यह "स्क्रीन" से शुरू होता है, इसके बिना इसे स्क्रीन पर ले जाएगा जहां से "केवल" शैली से शुरू होने पर इसे अनदेखा किया जाएगा।

एशिटका का उत्तर इस उदाहरण पर विचार करें

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

अगर हम "केवल" का उपयोग नहीं करते हैं, तो यह अभी भी काम करेगा क्योंकि डेस्कटॉप शैली भी हड़ताली एंड्रॉइड शैलियों का उपयोग करेगी लेकिन अनावश्यक ओवरहेड के साथ। इस स्थिति में यदि कोई ब्राउज़र नॉन सपोर्ट कर रहा है तो वह पहले की अनदेखी कर दूसरी स्टाइल-शीट पर वापस आ जाएगा।

Answer 5

@media screen and (max-width:480px) { … } 

screenयहां मीडिया क्वेरी का स्क्रीन आकार सेट करना है। जैसे प्रदर्शन क्षेत्र की अधिकतम चौड़ाई 480px है। इसलिए यह अन्य उपलब्ध मीडिया प्रकारों के विपरीत स्क्रीन को निर्दिष्ट कर रहा है।

@media only screen and (max-width: 480px;) { … } 

only screen यहां पुराने ब्राउज़रों को रोकने के लिए उपयोग किया जाता है जो निर्दिष्ट शैलियों को लागू करने से मीडिया सुविधाओं के साथ मीडिया प्रश्नों का समर्थन नहीं करते हैं।