Android पर क्रोम में भौतिक स्क्रीन आयाम / डीपीआई / पिक्सेल घनत्व प्राप्त करना

Question

सवाल

क्या Android पर Chrome में वास्तव में सही स्क्रीन भौतिक आयाम प्राप्त करने का एक सुरक्षित तरीका है? यदि आवश्यक हो, तो क्रोम और एंड्रॉइड के पुराने संस्करणों को दायरे से बाहर रखा जा सकता है।

पूर्व अनुसंधान

जावास्क्रिप्ट (या सीएसएस) के भीतर से डिवाइस के वास्तविक भौतिक स्क्रीन आयाम प्राप्त करने के बारे में स्टैकओवरफ्लो पर कई मृत-अंत प्रश्न हैं। ऐसा लगता है कि HTML एपीआई मानकीकरण और वास्तविक ब्राउज़र कार्यान्वयन के बीच कोई अभिसरण नहीं है, ब्राउज़र कार्यान्वयन का उल्लेख नहीं करना ओएस OSi पर निर्भर करता है जो बदले में सही जानकारी प्रदान करने वाले हार्डवेयर पर भरोसा करते हैं।

जिस तरह से उस समय प्रबल एक निश्चित पिक्सेल घनत्व है, और इसलिए बेकार में रास्ते से कुछ पूर्व उत्तर आर्कन (वर्ष 2011 और इसी तरह) हैं। अन्य लोग वेबकिट से संबंधित हैं, जबकि क्रोम ब्लिंक ने वेबकिट को क्रोम (?) में दबाया हो सकता है।

मैं एंड्रॉइड पर केवल क्रोम के लिए चीजों को बाध्य करके एक सरल समाधान के अस्तित्व का पता लगाना चाहूंगा।

ध्यान दें

यह सब ब्राउज़र के अंदर एक जावास्क्रिप्ट (या सीएसएस) समाधान के बारे में है, न कि किसी मूल एप्लिकेशन के लिए समाधान।

Comments

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

— matanster

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

— matanster

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

— जेसन टी फेदरिंगम

मैं आपके साथ 100% हूँ @matt। मुझे समझ में नहीं आता है कि मोज़िला और Google हमें एक जावास्क्रिप्ट संपत्ति क्यों नहीं दे सकते हैं जैसे window.screenDensityकि आपके और I, मैट डिवाइस के भौतिक इंच प्रति इंच हैं, इसे वहां से ले सकते हैं। window.screenHeightऔर window.screenWidthभौतिक मिलीमीटर में भी अच्छा होगा।

— त्रिकूट

@ किनलन भौतिक स्क्रीन आकार सामान्य रूप से महत्वपूर्ण है। यही कारण है कि इस समय मूल विकास वेब विकास की तुलना में अधिक शक्तिशाली है। मूल वातावरण में, मैं एक बटन बना सकता हूं, जो सभी आधुनिक उपकरणों पर 1 (वास्तविक दुनिया) इंच चौड़ा है, उदाहरण के लिए। यह वर्तमान में एक वेब वातावरण में संभव नहीं है, जहां तक ​​मुझे पता है। क्या मुझे कुछ याद आया?

— त्रिकूट

Answer 1

आप वास्तव में वास्तविक भौतिक आयाम या वास्तविक डीपीआई नहीं प्राप्त कर सकते हैं और यहां तक ​​कि अगर आप कर सकते हैं, तो आप उनके साथ कुछ भी नहीं कर सकते।

यह एक बहुत लंबी और जटिल कहानी है, इसलिए मुझे क्षमा करें।

वेब और सभी ब्राउज़र 1px को CSS पिक्सेल नामक इकाई के रूप में परिभाषित करते हैं। सीएसएस पिक्सेल एक वास्तविक पिक्सेल नहीं है, बल्कि एक इकाई है जिसे डिवाइस के देखने के कोण के आधार पर 1/96 इंच माना जाता है। यह एक संदर्भ पिक्सेल के रूप में निर्दिष्ट है ।

संदर्भ पिक्सेल 96dpi के पिक्सेल घनत्व और एक हाथ की लंबाई के पाठक से दूरी के साथ एक डिवाइस पर एक पिक्सेल का दृश्य कोण है। एक मामूली हाथ की लंबाई 28 इंच के लिए, दृश्य कोण इसलिए लगभग 0.0213 डिग्री है। हाथ की लंबाई पर पढ़ने के लिए, 1px इस प्रकार लगभग 0.26 मिमी (1/96 इंच) से मेल खाती है।

0.26 मिमी की जगह में हमारे पास बहुत सारे वास्तविक डिवाइस पिक्सेल हो सकते हैं।

ब्राउज़र मुख्य रूप से विरासत के कारणों के लिए ऐसा करता है - अधिकांश मॉनिटर 96dpi थे जब वेब पैदा हुआ था - लेकिन यह भी स्थिरता के लिए, "पुराने दिनों में" 800x600 पर 15 इंच की स्क्रीन पर 22px बटन 22xpx बटन के आकार से दोगुना होगा 1600x1200 में 15 इंच का मॉनिटर। इस मामले में स्क्रीन की DPI वास्तव में 2x (क्षैतिज रूप से लेकिन एक ही भौतिक स्थान में दो बार संकल्प) है। यह वेब और ऐप्स के लिए एक बुरी स्थिति है, इसलिए अधिकांश ऑपरेटिंग सिस्टम ने स्वतंत्र इकाइयों (एंड्रॉइड पर डीआईपीएस, आईओएस पर पीटी और वेब पर सीएसएस पिक्सेल ) में कई पिक्सेल तरीकों को सार करने के लिए तैयार किया है ।

एक व्यूपोर्ट की अवधारणा को पेश करने के लिए iPhone सफारी ब्राउज़र पहला (मेरे ज्ञान के लिए) था। यह एक छोटे स्क्रीन पर प्रस्तुत करने के लिए पूर्ण डेस्कटॉप शैली अनुप्रयोगों को सक्षम करने के लिए बनाया गया था। व्यूपोर्ट 960px चौड़ा होने के लिए परिभाषित किया गया था। यह मूल रूप से 3x (iphone मूल रूप से 320px था) पृष्ठ को ज़ूम करता है, इसलिए 1 सीएसएस पिक्सेल एक भौतिक पिक्सेल का 1 / 3rd है। जब आपने एक व्यूपोर्ट को परिभाषित किया था, तो आपको यह डिवाइस 163dpi पर 1 CSS पिक्सेल = 1 वास्तविक पिक्सेल से मेल खाने के लिए मिल सकता था।

व्यूपोर्ट का उपयोग करके जहां चौड़ाई "डिवाइस-चौड़ाई" है, आपको व्यूह की चौड़ाई को अधिकतम डिवाइस के आधार पर इष्टतम सीएसएस पिक्सेल आकार में सेट करने से मुक्त करता है, ब्राउज़र सिर्फ आपके लिए ऐसा करता है।

दोहरे डीपीआई उपकरणों की शुरूआत के साथ, मोबाइल फोन निर्माता नहीं चाहते थे कि मोबाइल पृष्ठ 50% छोटे दिखाई दें, इसलिए उन्होंने एक अवधारणा पेश की जिसका नाम है डिवाइसपिक्लराटियो (सबसे पहले मोबाइल वेबकिट पर मेरा विश्वास है), इससे उन्हें 1 सीएसएस पिक्सेल लगभग 1/2 तक रखने की सुविधा मिलती है। एक इंच का 96 वा लेकिन आपको समझ में आ जाएगा कि आपकी संपत्ति जैसे कि छवियों का आकार दोगुना होना चाहिए। यदि आप iPhone श्रृंखला को देखते हैं, तो उनके सभी उपकरण कहते हैं कि सीएसएस पिक्सल में स्क्रीन की चौड़ाई 320px है , हालांकि हम जानते हैं कि यह सच नहीं है।

इसलिए यदि आपने CSS स्पेस में 22px का बटन बनाया है, तो भौतिक स्क्रीन पर प्रतिनिधित्व 22 * ​​डिवाइस पिक्सेल अनुपात है। वास्तव में मैं यह कहता हूं, यह बिल्कुल ऐसा नहीं है क्योंकि डिवाइस पिक्सेल अनुपात कभी भी सटीक नहीं है, फोन निर्माताओं ने इसे 2.1329857289918 के बजाय 2.0, 3.0 जैसे अच्छे नंबर पर सेट किया है ...।

सारांश में, सीएसएस पिक्सल स्वतंत्र डिवाइस हैं और हमें स्क्रीन के भौतिक आकार और प्रदर्शन घनत्व आदि के बारे में चिंता करने की आवश्यकता नहीं है।

कहानी का नैतिक है: स्क्रीन के भौतिक पिक्सेल आकार को समझने के बारे में चिंता न करें। आपको इसकी आवश्यकता नहीं है। 50px को सभी मोबाइल उपकरणों में लगभग समान होना चाहिए, यह थोड़ा भिन्न हो सकता है, लेकिन सीएसएस पिक्सेल हमारे डिवाइस को सुसंगत दस्तावेजों और यूआई के निर्माण का स्वतंत्र तरीका है

संसाधन:

• https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
• https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
• http://viewportsizes.com/
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• http://en.wikipedia.org/wiki/Device_independent_pixel
• http://www.w3.org/TR/css3-values/#absolute-lengths
• https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Comments

@ मटके पर भी ऐसा ही होगा। जैसे यह रेटिना मैक बुक्स के साथ है। लक्ष्य यह है कि "सीएसएस पिक्सेल" सभी प्लेटफार्मों पर अपेक्षाकृत समान है, खासकर यदि आप व्यूपोर्ट चौड़ाई = डिवाइस-चौड़ाई सेट करते हैं।

— किनलन

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

— त्रिकूट

वास्तव में, पिक्सल में वास्तविक स्क्रीन आकार के लिए एक पूरी तरह से उचित उपयोग उचित संकल्प के साथ एक पृष्ठभूमि छवि को प्रस्तुत करना है।

— WhyNotHugo

"50px को सभी मोबाइल उपकरणों में लगभग समान होना चाहिए" कृपया साबित करें कि उदाहरण के लिए प्रत्येक 1200x1920 4 इंच फोन और 1000x600 10 इंच टैबलेट का उपयोग प्रत्येक अभिभावक के लिए किया जाता है।

— iloveregex

मैं यह भी असहमत हूं कि "आप उनके साथ कुछ नहीं कर सकते।": आप यह पता लगा सकते हैं कि क्या डिवाइस एक फोन या टैबलेट है और मज़बूती से यह मान लें कि उपयोगकर्ता अपनी उंगली से स्क्रीन के ऊपर आसानी से इंगित कर सकता है या नहीं।

— ब्रायन कैनार्ड

Answer 2

मैट के जवाब के आधार पर, मैंने एक परीक्षण किया:

// on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size
// approximately 15.4? Let's see...

var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var screenWidthMillimeters = svgEl.screenPixelToMillimeterX * 2880;
var screenHeightMillimeters = svgEl.screenPixelToMillimeterY * 1800;
var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem
var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in

console.log("The calculated diagonal of the screen is "+screenDiagonalInches+" inches. \nIs that close to the actual 15.4\"?");

यह आउटपुट है:

The calculated diagonal of the screen is 35.37742738560738 inches. 
Is that close to the actual value of 15.4?

नहीं।

ऐसा लगता है कि वेब ब्राउज़र में अभी तक वास्तविक भौतिक मूल्यों को प्राप्त करने का कोई तरीका नहीं है।

Comments

मुझे यकीन नहीं है कि आप किस उत्तर का उल्लेख कर रहे हैं (मैं "मैट" कहीं भी नहीं देखता हूं), लेकिन मुझे svgEl.screenPixelToMillimeterXजाहिरा तौर पर परिभाषित नहीं होने के कारण NaN मिलता है।

— माइकल

Answer 3

आप वास्तविक भौतिक इकाइयों का उपयोग करके कोई भी पृष्ठ तत्व बना सकते हैं और उसकी चौड़ाई निर्धारित कर सकते हैं। उदाहरण के लिए

<div id="meter" style="width:10cm"></div>

और फिर पिक्सल में इसकी चौड़ाई प्राप्त करें। उदाहरण के लिए नीचे HTML कोड (मैंने JQuery का इस्तेमाल किया) सेंटीमीटर में डिवाइस स्क्रीन की चौड़ाई दिखाता है

<script>
var pixPer10CM = $('#meter').width();
var CMPerPix = 10 / pixPer10CM;
var widthCM = screen.width * CMPerPix;

alert(widthCM);
</script>

Comments

वाह मुझे एहसास नहीं था कि आप सीएसएस के साथ ऐसा कर सकते हैं। यह कितना सही है? आपका ब्राउज़र आपकी स्क्रीन के भौतिक आयामों को कैसे जानता है? कहीं इसके लिए caniuse.com पर ब्राउज़र अनुकूलता तो नहीं ? मैं इसे नहीं ढूँढ सकता।

— जेक विल्सन

W3C साइट कहती है: "अतीत में, CSS की आवश्यकता थी कि क्रियान्वयन कंप्यूटर स्क्रीन पर भी सही इकाइयों को सही ढंग से प्रदर्शित करता है। लेकिन गलत क्रियान्वयन की संख्या सही होने के कारण और स्थिति में सुधार नहीं हुआ, CSS ने 2011 में उस आवश्यकता को छोड़ दिया। वर्तमान में , निरपेक्ष इकाइयाँ केवल मुद्रित आउटपुट और उच्च-रिज़ॉल्यूशन डिवाइस पर सही ढंग से काम करना चाहिए। CSS परिभाषित नहीं करता है कि "उच्च रिज़ॉल्यूशन" का क्या अर्थ है। लेकिन कम-अंत प्रिंटर के रूप में आजकल 300 डीपीआई पर शुरू होता है और उच्च-अंत स्क्रीन 200 डीपीआई पर होती हैं। कट-ऑफ शायद बीच में कहीं है। ”

— माइक

मुझे लगता है कि डिवाइस ड्राइवर द्वारा ओएस को प्रदान किए गए किसी भी अन्य मूल एप्लिकेशन जैसे ब्राउज़र ओएस एपीआई के माध्यम से डिवाइस रिज़ॉल्यूशन प्राप्त कर सकते हैं। सटीकता इस जानकारी पर निर्भर करती है।

— माइक

लेकिन डिवाइस रिज़ॉल्यूशन वास्तविक भौतिक आयामों के समान नहीं है। एक 14 "लैपटॉप और 15" लैपटॉप में एक ही रिज़ॉल्यूशन हो सकता है।

— जेक विल्सन

नहीं! आप नहीं कर सकते। सीएसएस में 10 सेमी का वास्तविकता में अलग आकार होगा। यह वास्तव में 10cm, 12cm या 7cm होगा, तो यह शुद्ध बात है। यहाँ मेरा jsfiddle डेमो उस समाधान पर आधारित है जो गलत मान देता है, क्योंकि ब्राउज़र हमेशा ऐसा व्यवहार करते हैं जैसे उनके पास प्रति इंच (dpi) पिक्सेल हों: jsfiddle.net/Lzsm3zo9

— Dariusz Sikorski

Answer 4

आप WURFL के साथ वह जानकारी प्राप्त कर सकते हैं:

उपकरण प्रदर्शन गुण

विशेषताओं को कहा जाता है:

resolution_(width|height)

physical_display_(width|height)

दीर्घ संस्करण:

इसे प्राप्त करने के लिए सबसे अच्छी और सबसे भरोसेमंद रणनीति यह है user agent stringकि ब्राउज़र से डीबी की तरह WURFL(या किसी अन्य) को डीबी तक भेजें जो आवश्यक जानकारी प्रदान कर सके।

उपयोगकर्ता एजेंट स्ट्रिंग

यह जानकारी का एक टुकड़ा है जो सभी आधुनिक ब्राउज़र प्रदान कर सकते हैं; यह डिवाइस के बारे में जानकारी को उजागर करता है और यह ओएस है। यह सिर्फ एक शब्दकोश की मदद के बिना अपने आवेदन के लिए पर्याप्त सार्थक नहीं है WURFL।

WURFL

यह एक डेटाबेस है जो आमतौर पर उपकरण गुणों का पता लगाने के लिए उपयोग किया जाता है ।

इसके साथ, आप बाजार के अधिकांश लोकप्रिय उपकरणों का सटीक समर्थन करने में सक्षम हो सकते हैं। मैं एक कोड डेमो पोस्ट करूंगा लेकिन एक WURFLसाइट पर डाउनलोड के साथ उपलब्ध है । आप इस तरह के डेमो को उदाहरणों / डेमो फ़ोल्डर पर पा सकते हैं जो लाइब्रेरी के साथ डाउनलोड किया गया है।

WURFL डाउनलोड करें

भौतिक आकार और रिज़ॉल्यूशन की जाँच के बारे में अधिक जानकारी और स्पष्टीकरण यहाँ दिया गया है: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286

Answer 5

"इस समस्या का कोई अच्छा समाधान नहीं है" जवाब के पूरक के रूप में, बस उन इकाइयों की जांच करें जिनका आप CSS https://www.w3schools.com/cssref/css_units.asp पर उपयोग कर सकते हैं

Unit    Description
cm      centimeters
mm      millimeters
in      inches (1in = 96px = 2.54cm)
px *    pixels (1px = 1/96th of 1in)
pt      points (1pt = 1/72 of 1in)
pc      picas (1pc = 12 pt)

* Pixels (px) are relative to the viewing device.
For low-dpi devices, 1px is one device pixel (dot) of the display.
For printers and high resolution screens 1px implies multiple device pixels.

इस विवरण के साथ ऐसा लगता है कि एक समाधान है। cm, mmऔर inस्क्रीन आकार और संकल्प के स्वतंत्र रूप से समान आकार के साथ कुछ खींचने के लिए उपयोग किया जाएगा। इसे ध्यान में रखते हुए, आप उम्मीद कर सकते हैं कि कम से कम px, ptयाpc पिक्सेल स्तर पर आकर्षित करने के लिए इस्तेमाल किया जा सकता है, जो कुछ परिशुद्धता के लिए आप उपयोग करना चाहते हैं (अन्यथा, क्या, पिक्सल के लाखों लोगों के होने का अधिकार पर बात है?)। नहीं। सभी इकाइयाँ एक मीट्रिक इकाई के अंश हैं, जिससे ये सभी इकाइयाँ अलग-अलग पैमाने पर बनती हैं। और कहानी में सबसे खराब तथ्य यह है कि इनमें से कोई भी सटीक नहीं है। बस w3schools उदाहरण के साथ खेलते हैं (एक 20cm रेखा खींचें और एक शासक के साथ इसे मापें)।

अंत में तो: - वहाँ सही रूप में भौतिक आयाम (जो के साथ मामला होना चाहिए के साथ कुछ आकर्षित करने के लिए कोई रास्ता नहीं है cm, mm, in, और अंततः ptऔर pc)। - स्क्रीन आकार और रिज़ॉल्यूशन के स्वतंत्र रूप से समान आकार के साथ कुछ खींचने का कोई तरीका नहीं है (जो कम से कम होना चाहिए px)।

यह दोनों एक कार्यान्वयन समस्या है (वास्तविक स्क्रीन आकार का उपयोग नहीं किया जा रहा है) और डिजाइन की समस्या ( pxस्क्रीन आकार से स्वतंत्र क्यों होना चाहिए जबकि उसके लिए पहले से ही कई इकाइयां हैं)।

Answer 6

मैंने अपनी वेब परियोजनाओं में से एक के साथ इस समस्या का सामना किया । http://www.vinodiscover.com इसका उत्तर यह है कि आप निश्चित रूप से नहीं जान सकते कि भौतिक आकार क्या है, लेकिन आप एक अनुमान लगा सकते हैं। जेएस और / या सीएसएस का उपयोग करके, आप व्यूपोर्ट / स्क्रीन की चौड़ाई और ऊंचाई, और मीडिया प्रश्नों का उपयोग करके पिक्सेल घनत्व पा सकते हैं। उदाहरण के लिए: iPhone 5 (326 पीपीआई) = 320px 568px और 2.0 पिक्सेल घनत्व, जबकि एक सैमसंग गैलेक्सी S4 (441ppi) = 360px x 640px और 3.0 पिक्सेल घनत्व। प्रभावी रूप से एक 1.0 पिक्सेल घनत्व लगभग 150 पीपीआई है।

इसे देखते हुए, मैंने अपने CSS को 1 कॉलम दिखाने के लिए सेट किया है, जब पिक्सेल घनत्व की परवाह किए बिना चौड़ाई 284px से कम है; फिर 284px और 568px के बीच दो कॉलम; फिर 852px से ऊपर 3 कॉलम। यह बहुत सरल है तो ऐसा लगता है, क्योंकि ब्राउज़र अब पिक्सेल घनत्व की गणना स्वचालित रूप से करते हैं।

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Comments

मूल विकास में आप सटीक मान प्राप्त कर सकते हैं। देशी के लिए +1, वेब के लिए -1।

— त्रिकूट

क्या आप Android में सटीक भौतिक आकार प्राप्त कर सकते हैं?

— अपोलो क्लार्क

हाँ: stackoverflow.com/questions/3166501/…

— trusktr

Answer 7

संकल्प को खोजने के लिए WURFL का उपयोग करने के बारे में zehelvion के जवाब के रूप में, यह भी ध्यान देने योग्य है कि WURFL जावास्क्रिप्ट स्निपेट के रूप में भी उपलब्ध है ।

Wurfl.io पर दिए जाने वाले मुफ्त संस्करण में , आपको स्क्रीन और रिज़ॉल्यूशन के बारे में जानकारी नहीं मिलेगी (हालाँकि केवल डिवाइस का नाम, फॉर्म फैक्टर और मोबाइल / मोबाइल नहीं), लेकिन यहाँ अधिक क्षमताओं के साथ एक व्यावसायिक संस्करण भी उपलब्ध है ।

Comments

मेरा सुझाव है कि टिप्पणी के लिए उस विशेष उत्तर में हो।

— डार्कजॉव

यह एक हास्यास्पद जटिल चीज़ है जिसे ब्राउज़र द्वारा मूल रूप से प्रदान किया जाना चाहिए।

— माइकल

Answer 8

सीएसएस पिक्सल वास्तव में हमारे "डिवाइस स्वतंत्र पिक्सेल" नहीं हैं। वेब प्लेटफॉर्म में विभिन्न प्रकार के डिवाइस होते हैं। जबकि सीएसएस पिक्सेल हैंडहेल्ड पर काफी सुसंगत लग रहे हैं, यह एक विशिष्ट 96 डीपीआई डेस्कटॉप मॉनिटर पर 50% बड़ा होगा। मेरा सवाल देखिए । यह वास्तव में कुछ मामलों में एक बुरी बात नहीं है, जैसे कि फोंट को बड़ी स्क्रीन पर बड़ा होना चाहिए, क्योंकि आंख की दूरी बड़ी है। लेकिन ui तत्व आयाम बहुत सुसंगत होना चाहिए। मान लीजिए कि आपके ऐप में एक टॉप बार है, आप चाहते हैं कि यह डेस्कटॉप और मोबाइल पर समान मोटाई का हो, डिफ़ॉल्ट रूप से यह 50% छोटा होगा, जो अच्छा नहीं है, क्योंकि स्पर्श करने योग्य तत्व बड़े होने चाहिए। एकमात्र समाधान जो मैंने पाया है वह डिवाइस डीपीआई पर आधारित विभिन्न शैलियों को लागू करना है।

आप जावास्क्रिप्ट में स्क्रीन DPI को window.devicePixelRatio के साथ प्राप्त कर सकते हैं। या सीएसएस प्रश्न:

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi)
    {
     /* specific styles for handhelds/ high dpi monitors*/
    }

मुझे नहीं पता कि यह लागू करना एक उच्च डीपीआई डेस्कटॉप मॉनिटर पर कैसे काम करेगा। शायद तत्व बहुत छोटे होंगे। यह वास्तव में एक शर्म की बात है कि वेब प्लेटफ़ॉर्म कुछ बेहतर प्रदान नहीं करता है। मुझे लगता है कि डिप का कार्यान्वयन बहुत कठिन नहीं होगा।

Comments

नहीं, आप नहीं कर सकते। मीडिया के सवाल इस मूर्खतापूर्ण "मान लें कि 96 डीपीआई" बकवास है, यानी वे आपके बारे में झूठ बोल रहे हैं कि डीपीआई क्या है।

— माइकल

Answer 9

मैंने आपकी टिप्पणियों में देखा कि आप वास्तव में उस आकार के साथ संबंधित थे जो बटन और इतने पर दर्शक को दिखाई देता है।

मुझे एक ही समस्या हो रही थी, जब तक मुझे पता नहीं चला कि यह प्रारंभिक पैमाना तय करने के लिए HTML हेडर में एक मेटा टैग जोड़ने की बात थी:

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 10

JqueryMobile तत्व की चौड़ाई

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

JqueryMobile तत्व की ऊँचाई

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

सौभाग्य दानी ११ Luck

Comments

वे आभासी आयाम हैं, जो हमेशा वास्तविक वास्तविक दुनिया के आयाम नहीं होते हैं।

— त्रुष्टक

धन्यवाद मुझे नहीं पता था कि

— danny117

Answer 11

GetPPI () फ़ंक्शन का उपयोग करना ( मोबाइल वेब: भौतिक पिक्सेल आकार कैसे प्राप्त करें? ), इस फॉर्मूला का उपयोग करने के लिए एक इंच आईडी प्राप्त करें:

var ppi = getPPI();
var x   = ppi * devicePixelRatio * screen.pixelDepth / 24;
$('#Cubo').width (x);
$('#Cubo').height(x);

<div id="Cubo" style="background-color:red;"></div>

Comments

क्यों PixDepth ?! रंग गहराई से संबंधित पिक्सेलडिप नहीं है, जिस स्थिति में मुझे आश्चर्य है कि यह यहां गणना के लिए कैसे प्रासंगिक है ....

— गणितज्ञ

Answer 12

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

BTW I के पास 40 साल का UI और सॉफ्टवेयर डिज़ाइन डिज़ाइन का अनुभव है और "VESA" के ड्राइवरों के दिनों से पहले जैसा लगता है वैसा ही हमेशा के लिए होता है।

टच स्क्रीन के लिए मेरे पास एक चीज़ थी जिसे मैंने "फ़िंगरसाइज़ ()" कहा था जो कि पिक्सेल की संख्या 1 सेमी थी (उंगली के औसत स्पर्श क्षेत्र के व्यास के बहुत करीब) लेकिन मूल डेटा "डीपीएमसीएम" है।

दूसरी चीज़ जो आप डिस्प्ले के लिए चाहते हैं, वह है "व्यू ऑफ़ एंगल" डिस्प्ले देखने और छूने के लिए डिस्प्ले डिवाइस का प्रकार देखने की दूरी को बहुत ज्यादा परिभाषित करता है।

    (Not code but I wanted fixed width font)

    Hand held - Phone/Tablet         25cm 
    Touch screen / Desktop Monitor   40cm         ( seated or standing at a counter
                                                    with partially extended arm )
    "Personal" Touch kiosk        50cm -> 80cm ( a bit further away standing 
                                                 extended arms and standing back 
                                                 to view )
    Presentation Screen.          any distance ( angle of view derived from pixel
                                                 width of device. An ideal conventional cinema 
                                                 seat (as opposed to imax or immersive) 
                                                 you want about 50 degrees
                                                 between edges of the screen. from viewer POV )

    So what you want universally available is:

    device usage type.
    finger size in pixels (dots per CM)
    pixel dimensions of display.

    Then internally, when laying out and drawing you want the size/shape of a pixel 
    for the current transform. 

यह वही है जो हम अपने APIs में प्रदान करने का प्रयास करते हैं, लेकिन कई मामलों में मिलना मुश्किल है।

Answer 13

आप आकार का मोटा अनुमान लगा सकते हैं, लेकिन यह सटीक नहीं है।

मैंने एक उदाहरण पेश किया है जो मैंने कुछ उपकरणों पर परीक्षण किया है कि परिणाम क्या हैं। मेरा iPhone 6 33% बड़ा मान देता है। मेरे मैक पर मेरे 27 "डेस्कटॉप मॉनिटर ने 30" मॉनिटर के रूप में रिपोर्ट किया।

var $el = document.createElement('div');
$el.style.width = '1cm';
$el.style.height = '1cm';
$el.style.backgroundColor = '#ff0000';
$el.style.position = 'fixed';
$el.style.bottom = 0;
document.body.appendChild($el);
var screenDiagonal = Math.sqrt(Math.pow((window.screen.width / $el.offsetWidth), 2) + Math.pow((window.screen.height / $el.offsetHeight), 2));
var screenDiagonalInches = (screenDiagonal / 2.54);
var str = [
  '1cm (W): ' + $el.offsetWidth + 'px',
  '1cm (H): ' + $el.offsetHeight + 'px',
  'Screen width: ' + window.screen.width + 'px',
  'Screen height: ' + window.screen.height + 'px',
  'Browser width: ' + window.innerWidth + 'px',
  'Browser height: ' + window.innerHeight + 'px',
  'Screen available width: ' + window.screen.availWidth + 'px',
  'Screen available height: ' + window.screen.availHeight + 'px',
  'Screen width: ' + (window.screen.width / $el.offsetWidth).toFixed(2) + 'cm',
  'Screen height: ' + (window.screen.height / $el.offsetHeight).toFixed(2) + 'cm',
  'Screen diagonal: ' + screenDiagonal.toFixed(2) + 'cm',
  'Screen diagonal: ' + screenDiagonalInches.toFixed(2) + 'in',
  'Device Pixel Ratio: ' + (window.devicePixelRatio || 1)
].join('\n');
var $pre = document.createElement('pre');
$pre.innerHTML = str;
document.body.appendChild($pre);

http://codepen.io/kus/full/xOAPYB/

Comments

मेरे 40 इंच ने 22 इंच के रूप में सूचना दी।

— रोबॉटॉक जूल

मेरे लिए न सही। मुझे लगता है कि समस्या के कारण है window.devicePixelRatio। यह Apple थंडरबोल्ट स्क्रीन पर 1 है, और मैकबुक प्रो टचबार 15 पर 2 "। क्या यह मान हमेशा एक पूर्णांक है? इसका कोई मतलब नहीं होगा क्योंकि यह एक अनुपात है। अन्य तत्व: stackoverflow.com/questions/163855857-…।

— टॉम