टी एल; डॉ
यदि आप एक उत्तरदायी वेबसाइट बना रहे हैं, तो स्क्रीन आकार की एक विस्तृत श्रृंखला को लक्षित करने के बजाय / अपने मीडिया प्रश्नों का उपयोग करें min-width/ max-widthकरें ।min-device-widthmax-device-width
2018 मीडिया क्वैरीज़ लेवल 4 विनिर्देश ड्राफ्ट के अनुसार , device-widthमीडिया फ़ीचर पदावनत है । इसे पिछड़ी अनुकूलता के लिए रखा जाएगा, लेकिन इसे टाला जाना चाहिए।
8. परिशिष्ट A: पदावनत मीडिया सुविधाएँ
व्यूपोर्ट के आकार (या पेज मीडिया पर पेज बॉक्स) के लिए क्वेरी करने के लिए width, heightऔर aspect-ratioमीडिया सुविधाओं का उपयोग किया जाना चाहिए, बजाय device-width, device-heightऔर device-aspect-ratio, जो डिवाइस के भौतिक आकार को संदर्भित करता है, भले ही कितनी जगह उपलब्ध हो। दस्तावेज तैयार किया जा रहा है। device-*मीडिया सुविधाओं को भी कभी कभी मोबाइल उपकरणों का पता लगाने के लिए एक प्रॉक्सी के रूप में इस्तेमाल कर रहे हैं। इसके बजाय, लेखकों को मीडिया विशेषताओं का उपयोग करना चाहिए जो उस उपकरण के पहलू का बेहतर प्रतिनिधित्व करते हैं जिसे वे शैली के खिलाफ करने का प्रयास कर रहे हैं।
एक साइड नोट के रूप में, अपने दस्तावेज़ के अनुभाग में एक व्यूपोर्ट मेटा टैग निर्दिष्ट करना याद रखें <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
व्याख्या
सभी अलग-अलग संभावित स्क्रीन रिज़ॉल्यूशन और पिक्सेल डेंसिटी के कारण दिए गए डिवाइस हो सकते हैं, एक पिक्सेल पिक्सेल नहीं है क्योंकि ध्यान में रखने के लिए कई चीजें हैं (ज़ूम, पिक्सेल घनत्व, स्क्रीन रिज़ॉल्यूशन और आकार, डिवाइस ओरिएंटेशन, पहलू अनुपात, आदि)। ..)। इस मामले में, एक पिक्सेल को वास्तव में एक भौतिक हार्डवेयर पिक्सेल के बजाय "ऑप्टिकल संदर्भ इकाई" के रूप में संदर्भित किया जाता है ।
सौभाग्य से, आप ब्राउज़र के व्यूपोर्ट की चौड़ाई और स्केलिंग को नियंत्रित करने के लिए अपने दस्तावेज़ के अनुभाग में एक व्यूपोर्ट मेटा टैग निर्दिष्ट कर सकते हैं <head>। यदि इस टैग का contentमान है width=device-width, तो स्क्रीन की चौड़ाई डिवाइस से स्वतंत्र पिक्सेल से मेल खाएगी और यह सुनिश्चित करेगी कि सभी अलग-अलग उपकरणों को स्केल और लगातार व्यवहार करना चाहिए।
<meta name="viewport" content="width=device-width, initial-scale=1">
मीडिया के प्रश्नों के संदर्भ में, आप शायद max-widthइसके बजाय उपयोग करना चाहेंगे max-device-width, क्योंकि max-widthव्यूपोर्ट (वर्तमान ब्राउज़र विंडो) max-device-widthको लक्षित करेगा , जबकि डिवाइस के वास्तविक पूर्ण स्क्रीन आकार / रिज़ॉल्यूशन को लक्षित करेगा।
दूसरे शब्दों में, यदि आप उपयोग कर रहे हैं, तो आपको max-device-widthअपने डेस्कटॉप ब्राउज़र का आकार बदलते समय लागू विभिन्न मीडिया क्वेरी दिखाई नहीं देगी, क्योंकि इसके विपरीतmax-width , केवल डिवाइस की वास्तविक पूर्ण स्क्रीन आकार को ध्यान में रखा जाता है; ब्राउज़र विंडो का वर्तमान आकार नहीं।
यदि आप एक अनुकूली लेआउट बनाने का प्रयास कर रहे हैं तो इससे बहुत बड़ा अंतर पड़ता है क्योंकि ब्राउज़र को आकार देते समय साइट उत्तरदायी नहीं होगी। इसके अलावा, यदि आप max-device-widthउन मीडिया क्वेरीज़ का उपयोग कर रहे हैं, जिनका उपयोग आप छोटे स्क्रीन वाले उपकरणों को लक्षित करने के लिए कर रहे हैं, तो डेस्कटॉप विंडो पर आकार बदलने के बावजूद भी छोटे स्क्रीन आकार से मेल नहीं खाएंगे।
2018 तक, नवीनतम मीडिया क्वेरी विनिर्देश ड्राफ्ट ने वास्तव में device-widthमीडिया सुविधा को हटा दिया है , इसलिए इसे टाला जाना चाहिए।
इसके अलावा, Google डेवलपर्स पर यह लेख अत्यधिक इसके उपयोग को हतोत्साहित करता है max-device-width:
Google डेवलपर्स - वेब फंडामेंटल्स - उत्तरदायी सीएसएस मीडिया क्वेरी
इसके आधार पर प्रश्नों का निर्माण भी संभव है *-device-width; हालांकि यह प्रथा दृढ़ता से हतोत्साहित है ।
अंतर सूक्ष्म लेकिन बहुत महत्वपूर्ण है: min-widthब्राउज़र विंडो min-device-widthके आकार पर आधारित है , जबकि स्क्रीन के आकार पर आधारित है। दुर्भाग्य से कुछ ब्राउज़र, जिसमें विरासत एंड्रॉइड ब्राउज़र भी शामिल है, डिवाइस की चौड़ाई को ठीक से रिपोर्ट नहीं कर सकता है और इसके बजाय अपेक्षित सिग्नल चौड़ाई के बजाय डिवाइस के पिक्सल में स्क्रीन का आकार रिपोर्ट कर सकता है।
इसके अलावा, उपयोग करने *-device-widthसे सामग्री को डेस्कटॉप या अन्य डिवाइसों पर उपयोग करने से रोका जा सकता है जो विंडोज़ को आकार देने की अनुमति देते हैं क्योंकि क्वेरी वास्तविक डिवाइस आकार पर आधारित होती है, न कि ब्राउज़र विंडो के आकार पर।
आगे की पढाई: