संकल्प के बजाय स्क्रीन आकार के बारे में मीडिया क्वेरी

Question

क्या सीएसएस मीडिया प्रश्नों में भौतिक स्क्रीन चौड़ाई का उपयोग करने के लिए कोई कामकाज है? आज, ऐसे फोन हैं जो डेस्कटॉप मॉनीटर के संकल्प से अधिक हैं। हालांकि, फोन को अभी भी मोबाइल लेआउट प्रदर्शित करना चाहिए और मानक लेआउट डेस्कटॉप करना चाहिए।

तो मैं नीचे दिए गए उदाहरण की तरह पिक्सेल आधारित क्वेरी पर भरोसा नहीं कर सकता। इसके बजाय, मुझे या तो भौतिक माप, या पिक्सेल घनत्व के बारे में एक चाहिए।

@media screen and (min-width: 700px) { 

} 

चूंकि मुझे अपने शोध के माध्यम से इस तरह के मापन नहीं मिला है, इसलिए वे मौजूद नहीं हैं। वैसे भी, यह समस्या आम तौर पर कैसे पहुंची जाती है?

Answer 1

ठीक है, शुरुआत के लिए, सीएसएस पिक्सेल an angular measurement है और उपकरणों के बीच सामान्य रूप से सामान्यीकृत है। पूरी तरह से नहीं, लेकिन ज्यादातर मामलों में यह एक गैर-मुद्दा होने के लिए पर्याप्त है।

व्यक्तिगत रूप से मैं em में मीडिया प्रश्नों को मापता हूं ताकि वे मेरे फ़ॉन्ट आकार के सापेक्ष हों। मेरा मतलब है, लोग आमतौर पर वेबसाइट पर पाए गए पाठ को पढ़ने के लिए एक वेबसाइट पर जाते हैं, इसलिए जब तक प्रति पंक्ति उचित शब्दों की मात्रा हो, मैं संतुष्ट हूं।

आपको वास्तव में भौतिक (डिवाइस) चौड़ाई के साथ माप नहीं करना चाहिए क्योंकि लोगों के पास यूआई तत्व अंतरिक्ष ले सकते हैं (या बस अपने ब्राउज़र को पूर्ण स्क्रीन में नहीं चला सकते हैं)।

Answer 2

आज यह जांचने के लिए एक विश्वसनीय विधि मौजूद नहीं प्रतीत होता है।

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

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

टेलीविज़न सेट के लिए @media क्वेरी है जो मदद कर सकती है, लेकिन इसके लिए अभी समर्थन बहुत संभव है। मेरा Google क्रोम v32 इसका समर्थन करता है। यहां अपना परीक्षण करें: http://cssmediaqueries.com/

Answer 3

मीडिया प्रश्न जैसे @media screen and (min-width: 700px) और window.innerWidth सीएसएस पिक्सल का उपयोग करें। सबसे पहले जब मोबाइल डिवाइस वास्तव में 320px थे, सीएसएस पिक्सेल और असली पिक्सल समान थे। अब 800px और एक ही आकार के साथ नए डिवाइस अभी भी 320 सीएसएस पिक्सल की रिपोर्ट करते हैं।

और यह पीछे की ओर संगत वेबसाइटों को डिजाइन करने के लिए वास्तव में अच्छा है। अनिवार्य रूप से @media screen and (max-width: 480px) का अनुवाद इस प्रकार किया जा सकता है: छोटे, खाते में आंखों को स्क्रीन की दूरी पर लेना, और स्क्रीन आकार (मीटर में पिक्सल नहीं)।

तो सीएसएस पिक्सेल किसी और चीज से अधिक संदर्भ उपाय के रूप में कार्य करता है।

वास्तविक पिक्सेल, डीपीआई, स्क्रीन प्रकार और अभिविन्यास मीडिया प्रश्नों के साथ उपलब्ध हो सकता है या उपलब्ध होगा। लेकिन यह उन लोगों का उपयोग करने के लिए एक विरोधी पैटर्न हो सकता है।

viewport मेटा टैग भी न भूलें।