मीडिया फोन स्क्रीन पर क्यों काम करता है?

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

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

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

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

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

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

यदि आपके फ़ोन की चौड़ाई 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 मेटा टैग में सेटिंग्स को निष्क्रिय या बदल देता है।

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

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

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