मेरे फोन का रेजोल्यूशन 2280x1080 है। निम्नलिखित कोड मेरे फ़ोन पर पृष्ठभूमि का रंग नीला करके क्यों बदलता है?

@media (max-width: 500px) { body { background-color: blue; } }

दिलचस्प है, यह "कंप्यूटर मोड" चालू करने के बाद काम करना बंद कर देता है। क्रोम और फ़ायरफ़ॉक्स पूर्वावलोकन के लिए पुष्टि की गई।

-2
Blubik 25 मार्च 2020, 02:55

3 जवाब

खैर, यह विषय मेरे दृष्टिकोण से थोड़ा व्यापक है, लेकिन मैं आपको एक समग्र उत्तर दे सकता हूं।

सबसे पहले, मुझे दृढ़ता से लगता है कि आप 1080x2280 कहना चाहते थे। यदि आप पहले चौड़ाई निर्दिष्ट नहीं कर रहे हैं तो यह भ्रामक है।

आपके फ़ोन का रिज़ॉल्यूशन भौतिक पिक्सेल की संख्या के रूप में व्यक्त किया जाता है। CSS द्वारा उपयोग किए जाने वाले मान वास्तव में तार्किक पिक्सेल के रूप में जाने जाते हैं। तार्किक पिक्सेल मूल रूप से भौतिक पिक्सेल का प्रतिनिधित्व करते हैं, जो आपके डिवाइस डीपीआर (डिवाइस पिक्सेल अनुपात) से विभाजित होते हैं।

इसलिए, आपके ब्राउज़र के व्यूपोर्ट का आयाम 360x760 होगा, अगर आप सैमसंग गैलेक्सी एस10 जैसे डिवाइस के मालिक हैं, जिसकी डीपीआर 4 है।

इस विषय पर बेहतरीन वीडियो: पिक्सेल डेंसिटी, डीमिस्टिफाइड

भौतिक पिक्सेल बनाम तार्किक: https://blog.specctr.com/pixels- भौतिक-बनाम-तार्किक-c84710199d62

0
Vlad Moisuc 25 मार्च 2020, 03:23
धन्यवाद। अगर मैं सूत्र को सही ढंग से समझूं: तार्किक पिक्सेल = भौतिक पिक्सेल / डीपीआर? उदाहरण के लिए: 1080 / 4 = 270 (यदि डीपीआर = 4)? 2280x1080 के लिए क्षमा करें। सैमसंग को इसे सेटिंग्स में ठीक करना चाहिए।
 – 
Blubik
25 मार्च 2020, 03:33
हाँ, तुम सही हो। यहां अन्य उदाहरणों के साथ एक उपयोगी संसाधन दिया गया है। Width x Height dp(dp from डिवाइस-इंडिपेंडेंट Pixel) उन तार्किक पिक्सल को दर्शाता है, जबकि चौड़ाई x ऊंचाई px भौतिक पिक्सल और घनत्व हैं। डीपीआर है।
 – 
Vlad Moisuc
25 मार्च 2020, 03:46

यदि आपके फ़ोन की चौड़ाई 1080 पिक्सेल है, तो वह device-width - स्क्रीन पर भौतिक पिक्सेल। यदि उस फ़ोन का उसका device-pixel-ratio उदाहरण के लिए 3 है, तो इसका अर्थ है कि प्रत्येक "css पिक्सेल" 3x3 डिवाइस पिक्सेल के बराबर होता है। max-width: 500px मीडिया क्वेरी में "सीएसएस पिक्सल" को संदर्भित करता है, इसलिए, डिवाइस-पिक्सेल-अनुपात 3 के साथ जो 1500 डिवाइस पिक्सेल होगा। और आपके फोन का स्क्रीन साइज 760x360 (css) पिक्सल होगा।

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

आप मीडिया प्रश्नों में min-device-width / max-device-width का उपयोग कर सकते हैं कर सकते हैं। हालांकि, अधिकांश उद्देश्यों के लिए max-width/ min-width का उपयोग करना और "css पिक्सेल" के साथ सोचना / काम करना बेहतर है

पुनश्च: जिस "कंप्यूटर मोड" के बारे में आप बात कर रहे हैं, वह viewport मेटा टैग में सेटिंग्स को निष्क्रिय या बदल देता है।

0
Johannes 25 मार्च 2020, 03:51

आपको मीडिया शब्द के बाद screen भी टाइप करना होगा ताकि स्क्रीन की जांच की जा सके मीडिया क्वेरी केवल स्क्रीन से अधिक जांच कर सकती है W3C स्रोत: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

तो आपके मामले में यह होगा:

@media screen and (max-width: 500px){ body { background-color: blue; } }
-1
Deep Patel 25 मार्च 2020, 03:02
@media screen and (max-width: 500px) के लिए अभी भी काम करता है (क्रोम में)
 – 
Blubik
25 मार्च 2020, 03:06
निश्चित रूप से नहीं। यह अभी भी काम करता है (और यह नहीं होना चाहिए!)
 – 
Blubik
25 मार्च 2020, 03:15
इसे देखें, आप कौन सा डिवाइस चुन सकते हैं:css -tricks.com/snippets/css/media-queries-for-standard-devices
 – 
Deep Patel
25 मार्च 2020, 03:23