170

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

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

css

— ilyo
स्रोत

161

संक्षिप्त जवाब

डिवाइस पिक्सेल अनुपात भौतिक पिक्सेल और तार्किक पिक्सेल के बीच का अनुपात है। उदाहरण के लिए, iPhone 4 और iPhone 4S 2 के डिवाइस पिक्सेल अनुपात की रिपोर्ट करते हैं, क्योंकि भौतिक रैखिक रिज़ॉल्यूशन तार्किक रैखिक रिज़ॉल्यूशन से दोगुना है।

शारीरिक संकल्प: 960 x 640
तार्किक संकल्प: 480 x 320

सूत्र है:

$linres_p / linres_l$

कहाँ पे:

$linres_p$ है शारीरिक रैखिक संकल्प

तथा:

$linres_l$ तार्किक रैखिक संकल्प है

अन्य डिवाइस गैर-पूर्णांक सहित विभिन्न डिवाइस पिक्सेल अनुपात की रिपोर्ट करते हैं। उदाहरण के लिए, नोकिया लूमिया 1020 की रिपोर्ट 1.6667, सैमसग गैलेक्सी गैलेक्सी 4 की रिपोर्ट 3 और एप्पल आईफोन 6 प्लस की रिपोर्ट 2.46 (स्रोत: dpilove ) है । लेकिन यह सिद्धांत में कुछ भी नहीं बदलता है, क्योंकि आपको कभी भी किसी एक विशिष्ट डिवाइस के लिए डिज़ाइन नहीं करना चाहिए।

विचार-विमर्श

सीएसएस "पिक्सेल" को "कुछ स्क्रीन पर एक तस्वीर तत्व" के रूप में भी परिभाषित नहीं किया गया है, बल्कि कोण को देखने के एक गैर-रैखिक कोणीय माप के रूप में $0.0213 डिग्री$ , जो $1/96$ हाथ की लंबाई पर लगभग एक इंच है। स्रोत: सीएसएस निरपेक्ष लंबाई

जब वेब डिज़ाइन की बात आती है, तो इसके बहुत सारे निहितार्थ होते हैं, जैसे कि उच्च-परिभाषा छवि संसाधन तैयार करना और विभिन्न डिवाइस पिक्सेल अनुपात में अलग-अलग छवियों को ध्यान से लागू करना। आप बहुत ही उच्च रिज़ॉल्यूशन वाली छवि को डाउनलोड करने के लिए कम-एंड डिवाइस को मजबूर नहीं करना चाहेंगे, केवल स्थानीय स्तर पर डाउनस्केल करना। आप यह भी नहीं चाहते हैं कि उच्च-अंत डिवाइस एक धुंधले उपयोगकर्ता अनुभव के लिए कम रिज़ॉल्यूशन छवियों को अपस्केल करें।

यदि आप कई अलग-अलग डिवाइस पिक्सेल अनुपात के लिए समायोजित करने के लिए बिटमैप छवियों के साथ फंस गए हैं, तो आपको विभिन्न उपकरणों के विभिन्न समूहों के लिए संसाधनों के विभिन्न सेट प्रदान करने के लिए CSS मीडिया क्वेरी का उपयोग करना चाहिए । इसे अच्छी चाल के साथ मिलाएं background-size: coverया background-sizeप्रतिशत मूल्यों को स्पष्ट रूप से सेट करें ।

उदाहरण

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

इस प्रकार, प्रत्येक डिवाइस प्रकार केवल सही छवि संसाधन को लोड करता है। यह भी ध्यान रखें कि pxCSS में इकाई हमेशा तार्किक पिक्सेल पर काम करती है ।

वेक्टर ग्राफिक्स के लिए एक मामला

जैसा कि अधिक से अधिक डिवाइस प्रकार दिखाई देते हैं, यह उन सभी को पर्याप्त बिटमैप संसाधन प्रदान करने के लिए मुश्किल हो जाता है। CSS में, मीडिया क्वेरीज़ वर्तमान में एकमात्र तरीका है, और HTML5 में, चित्र तत्व आपको विभिन्न मीडिया प्रश्नों के लिए अलग-अलग स्रोतों का उपयोग करने देता है, लेकिन समर्थन अभी भी 100% नहीं है क्योंकि अधिकांश वेब डेवलपर्स को अभी भी IE11 को थोड़ी देर के लिए समर्थन करना है ( source: कैनीयूज़ ) ।

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

— एंडर्स टोर्ब्लाड
स्रोत

1

thanx, इसलिए अगर मैं iphone 4 के लिए एक css फ़ाइल बनाता हूँ और पेज को 480 x 320 का CSS माप देता width=device-widthहूँ और क्या मैंने इसे पूर्ण स्क्रीन तक बढ़ाया होगा?

— ०

1

बिल्कुल सही। और यदि आप उच्च-रिज़ॉल्यूशन के चित्रों का उपयोग कर रहे हैं background-image, तो आप इसे जोड़ सकते हैं -webkit-background-size:50%, क्योंकि अन्यथा, छवि का आकार तार्किक पिक्सेल गणना का पालन करेगा । w3.org/TR/2002/WD-css3-background-20020802/#background-size

— एंडर्स तोर्ब्लाड

2

आप नहीं कर सकते। आपको तार्किक पिक्सेल का उपयोग करके अपने तत्वों को लेआउट करना होगा, और उच्च-रिज़ॉल्यूशन की छवियों और background-sizeप्रदर्शन का उपयोग करने के लिए ट्रिक का उपयोग करना होगा।

— एंडर्स तोर्ब्लाद

2

मुझे Android केस के बारे में कोई जानकारी नहीं है। यह हो सकता है कि विभिन्न निर्माताओं के पास तार्किक और भौतिक पिक्सल के बारे में अलग-अलग विचार हैं ... सौ अलग-अलग उपकरणों के एक जोड़े पर खुद को आज़माएं ... या बस यह मान लें कि डिवाइस द्वारा रिपोर्ट किए गए मान सही हैं। विशिष्ट उपकरणों के लिए डिज़ाइन न करें, लेकिन मीडिया प्रश्नों का उपयोग करके मूल्य श्रेणियों के लिए डिज़ाइन करें!

— एंडर्स तोर्बलाड

2

@atornblad मुझे लगता है कि यह ".. शारीरिक और तार्किक पिक्सल के बीच" होना चाहिए

— इल्या बुज़िक

159

डिवाइस पिक्सेल अनुपात == सीएसएस पिक्सेल अनुपात

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

ब्राउज़र का CSS सूत्र द्वारा डिवाइस के तार्किक (या व्याख्या किए गए) रिज़ॉल्यूशन की गणना करता है:

$\text{logical resolution}=\frac{\text{physical resolution}}{\text{device pixel ratio}}$

उदाहरण के लिए:

Apple iPhone 6s

वास्तविक रिज़ॉल्यूशन: 750 x 1334
सीएसएस पिक्सेल अनुपात: 2
तार्किक संकल्प:

$\frac{750}{2} \text{ x } \frac{1334}{2} = 375 \text{ x } 667$

वेब पेज देखते समय, सीएसएस को लगता है कि डिवाइस में 375x667 रिज़ॉल्यूशन की स्क्रीन होगी और मीडिया क्वेरीज़ का जवाब होगा जैसे कि स्क्रीन 375x667 है । लेकिन स्क्रीन पर प्रदान किए गए तत्व वास्तविक 375x667 स्क्रीन की तुलना में दोगुने तेज होंगे क्योंकि भौतिक स्क्रीन में कई भौतिक पिक्सेल हैं।

कुछ अन्य उदाहरण:

सैमसंग गैलेक्सी एस 4

वास्तविक रिज़ॉल्यूशन: 1080 x 1920
सीएसएस पिक्सेल अनुपात: 3
तार्किक संकल्प:

$\frac{1080}{3} \text{ x } \frac{1920}{3} = 360 \text{ x } 640$

आई फ़ोन 5 एस

वास्तविक रिज़ॉल्यूशन: 640 x 1136
सीएसएस पिक्सेल अनुपात: 2
तार्किक संकल्प:

$\frac{640}{2} \text{ x } \frac{1136}{2} = 320 \text{ x } 568$

डिवाइस पिक्सेल अनुपात क्यों मौजूद है?

सीएसएस पिक्सेल अनुपात बनाया गया था क्योंकि फोन स्क्रीन उच्च संकल्प प्राप्त करते हैं, अगर हर डिवाइस में अभी भी एक सीएसएस पिक्सेल अनुपात 1 था, तो वेबपेज देखने के लिए बहुत कम प्रस्तुत करेंगे।

एक विशिष्ट फुल स्क्रीन डेस्कटॉप मॉनिटर लगभग 1920x1080 रिज़ॉल्यूशन में 24 "है। कल्पना करें कि क्या यह मॉनिटर लगभग 5 तक सिकुड़ गया था" लेकिन इसका एक ही रिज़ॉल्यूशन था। स्क्रीन पर चीजों को देखना असंभव होगा क्योंकि वे इतने छोटे होंगे। लेकिन मैन्युफैक्चरर्स 1920x1080 रेजोल्यूशन वाले फोन स्क्रीन लगातार ला रहे हैं।

इसलिए फोन निर्माताओं द्वारा डिवाइस पिक्सेल अनुपात का आविष्कार किया गया था ताकि वे फोन स्क्रीन के रिज़ॉल्यूशन, तीक्ष्णता और गुणवत्ता को धक्का दे सकें, बिना स्क्रीन पर तत्वों को देखने या पढ़ने के लिए बहुत छोटा बना सकें।

यहाँ एक उपकरण है जो आपको आपके वर्तमान डिवाइस के पिक्सेल घनत्व को भी बताता है:

http://bjango.com/articles/min-device-pixel-ratio/

— जेक विल्सन
स्रोत

विकिपीडिया लेख हटा दिया गया है। :-( क्या यह जानकारी कहीं और उपलब्ध है?

— साइमन ईस्ट

1

इसलिए छवियों को उच्च डीपीआई या भौतिक पिक्सेल से मिलान करने के लिए स्ट्रेच किया जाता है। कहते हैं कि इमेज 300px है, लॉजिकल / css px 300 है, लेकिन फिजिकल px 600 है तो इमेज की चौड़ाई सेट करने का मतलब इमेज स्ट्रेच हो जाएगा .. मैंने यह भी सुना है कि कभी-कभी हाई डीपीआई पर इमेज छोटी दिखाई देती हैं, क्यों?

— मुहम्मद उमर

2

@MuhammadUmer आपके उदाहरण width: 100%में प्रदर्शन की पूरी चौड़ाई के साथ एक 300px छवि होगी। इसे बढ़ाया नहीं जाएगा। स्क्रीन "सोचता है" यह एक 300px डिस्प्ले है। छवियाँ तार्किक / सीएसएस संकल्प के अनुसार प्रदर्शित की जाती हैं। अब, आपके उदाहरण में आप इसकी जगह 600px की छवि भी देख सकते हैं। यह तार्किक 300px प्रदर्शन की पूरी चौड़ाई होगी, लेकिन चूंकि आपका प्रदर्शन मूल 600px है, इसलिए छवि आपकी मूल 300px छवि की तुलना में दोगुनी तेज दिखाई देगी। बड़ी छवि, लेकिन यह बेहतर दिखता है क्योंकि प्रदर्शन में उन सभी अतिरिक्त पिक्सेल हैं। यह "रेटिना डिस्प्ले" के पीछे का विचार है।

— जेक विल्सन

@JakeWilson: यह मेरे लिए एक नया विषय है और मैं इसे पूरी तरह से नहीं समझता। उदाहरण में सीएसएस पिक्सेल अनुपात = 2। चित्र 300 भौतिक पिक्सेल चौड़ा है, css में हमने इसे 100% पर सेट किया है, इसलिए यह 300 CSS पिक्सेल चौड़ा हो जाएगा। चूंकि सीएसएस पीएक्स अनुपात 2 है, यह 600 भौतिक पिक्सेल चौड़ा हो जाएगा और इसकी चौड़ाई बिल्कुल डिस्प्ले की चौड़ाई से मेल खाएगी। लेकिन अगर इसकी मूल चौड़ाई 300 भौतिक px है और अब यह 600 भौतिक px है तो इसे कैसे बढ़ाया नहीं जाता है? मेरी समझ इसकी गुणवत्ता कम है क्योंकि यह 300 से 600px तक शारीरिक रूप से फैला हुआ है। आप इस पर थोड़ा और विस्तार कर सकते हैं, कृपया?

— पीटर

1

@ मुझे पता नहीं है और यह वास्तव में कोई फर्क नहीं पड़ता कि यह हार्डवेयर / सॉफ्टवेयर में कैसे परिभाषित किया जाता है। आपके द्वारा काटे जाने के तरीके की गणना दूसरे से की जाती है।

— जेक विल्सन

9

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-मोज़-डिवाइस-पिक्सेल-अनुपात
सीएसएस पिक्सेल प्रति डिवाइस पिक्सेल की संख्या देता है।

यह लगभग स्व-व्याख्या है। संख्या एक "वर्चुअल" पिक्सेल (CSS में सेट आकार) को प्रदर्शित करने के लिए "वास्तविक" पिक्सेल (स्क्रीन के भौतिक पिक्सल्स) के अनुपात का वर्णन करती है।

— oezi
स्रोत

4

मुझे कैसे पता चलेगा कि कोई डिवाइस सभी वर्चुअल पिक्सेल माप का उपयोग करता है और यह क्या है? और मैं कैसे सीएसएस माप में डिवाइस पिक्सल का उपयोग करता हूं और आभासी नहीं?

— oलियो

दुख की बात है, आपको इसे गूगल करना होगा या असली डिवाइस पर परीक्षण करना होगा :(

— netalex

9

वैरिएबल पिक्सेल डेंसिटी के लिए बोरिस स्मस के हाई डीपीआई इमेज में डिवाइस पिक्सेल अनुपात की अधिक सटीक परिभाषा है: सीएसएस पिक्सेल प्रति डिवाइस पिक्सेल की संख्या एक अच्छा अनुमान है, लेकिन पूरी कहानी नहीं।

ध्यान दें कि आप डिवाइस के साथ उपयोग की गई डीपीआर प्राप्त कर सकते हैं window.devicePixelRatio।

— सैम डटन
स्रोत

वास्तव में डिवाइस पिक्सेल अनुपात क्या है?