অ্যান্ড্রয়েডে ক্রোমে শারীরিক স্ক্রিনের মাত্রা / ডিপিআই / পিক্সেল ঘনত্ব অর্জন করা

Question

প্রশ্ন

অ্যান্ড্রয়েডে Chrome এ প্রকৃত সঠিক পর্দার দৈহিক মাত্রা পাওয়ার কোনও নিরাপদ উপায় আছে? প্রয়োজনে ক্রোম এবং অ্যান্ড্রয়েডের পুরানো সংস্করণগুলি সুযোগের বাইরে ছেড়ে যেতে পারে।

পূর্ব গবেষণা

জাভাস্ক্রিপ্ট (বা সিএসএস) থেকে কোনও ডিভাইসের আসল শারীরিক স্ক্রিনের মাত্রা পাওয়ার বিষয়ে স্ট্যাকওভারফ্লোতে অসংখ্য মৃত-শেষ প্রশ্ন রয়েছে। দেখে মনে হচ্ছে যে এইচটিএমএল এপি মানককরণ এবং প্রকৃত ব্রাউজার বাস্তবায়নের মধ্যে কোনও সংযোগ নেই, ব্রাউজারের প্রয়োগটি ওএস এপি-র উপর নির্ভর করে যা সঠিকভাবে সরবরাহ করার জন্য হার্ডওয়্যারের উপর নির্ভর করে।

উপায়টির পূর্বের কয়েকটি উত্তর হ'ল তত্ক্ষণাত্ প্রবাহিত একটি নির্দিষ্ট পিক্সেল ঘনত্ব ধরে ধরে আরকেন (বছর ২০১১ এবং এর মতো) এবং তাই অকেজো। অন্যরা ওয়েবকিটের সাথে সম্পর্কিত যেখানে ক্রোম ব্লিঙ্কের ক্রোম (?) এ ওয়েবকিট ছাড়িয়ে যেতে পারে।

আমি কেবলমাত্র অ্যান্ড্রয়েডে ক্রোমগুলিকে সীমাবদ্ধ করে একটি সহজ সমাধানের অস্তিত্ব সন্ধান করতে চাই।

বিঃদ্রঃ

এটি ব্রাউজারের ভিতরে জাভাস্ক্রিপ্ট (বা সিএসএস) সমাধান সম্পর্কে, কোনও নেটিভ অ্যাপ্লিকেশনের সমাধান নয়।

Comments

এটা সহজ ভুল। আমার ইউজার ইন্টারফেসটি ব্যবহারকারীরা যেমন দেখায় তেমন একটি বোতামটি কত বড় হওয়া উচিত তার মতো জিনিসগুলি জানতে চায়। আপনি সম্ভবত কোনও কোড বিকাশকারী হিসাবে খুব বেশি চিন্তাভাবনা করতে পারেন;)

— ম্যাটানস্টার

উদাহরণস্বরূপ, একটি বোতামের আকার ভিউপোর্টের শতাংশ নয় - বরং স্পর্শ করার জন্য যথেষ্ট বড়। আমি নিশ্চিত না যে এটি কীভাবে উচ্চমানের ডিজাইনের জন্য অর্থবোধ করে।

— ম্যাটানস্টার

@ ম্যাট একদম সঠিক। ওয়েব ইউএক্স / ইউআই এর সবচেয়ে গুরুত্বপূর্ণ দিকগুলির মধ্যে একটি, বিশেষত চর্বিযুক্ত আঙুলের বিশ্বে, এটি নিশ্চিত করা হচ্ছে যে বোতামগুলি পয়েন্টারের জন্য উপযুক্ত - এই ক্ষেত্রে, একটি আঙুল - পাশাপাশি দেখার দূরত্বের জন্য উপযুক্ত আকারের পর্দা থেকে চোখ। মোবাইল ডিভাইসের এই নতুন ক্ষেত্রটি বিষয়টি জটিল করেছে, তাই শারীরিক পর্দার আকার সনাক্তকরণ আরও বেশি গুরুত্বপূর্ণ।

— জেসন টি ফেদারিংহাম

আমি আপনার সাথে @ ম্যাট 100% আমি বুঝতে পারছি না যে মোজিলা এবং গুগল কেবল আমাদের একটি জাভাস্ক্রিপ্ট সম্পত্তি দিতে পারে না window.screenDensityযার মধ্যে আপনি এবং আমি, ম্যাট, ডিভাইসটি সেখান থেকে নিতে পারব বলে প্রতি ইঞ্চি দৈহিক পিক্সেল রয়েছে। window.screenHeightএবং window.screenWidthশারীরিক মিলিমিটারে খুব ভাল হবে।

— trusktr

@ কিন্লান শারীরিক পর্দার আকার সাধারণভাবে গুরুত্বপূর্ণ। এই কারণেই এই মুহুর্তে ওয়েব বিকাশের চেয়ে দেশীয় বিকাশ আরও শক্তিশালী। নেটিভ পরিবেশে, আমি উদাহরণস্বরূপ, সমস্ত আধুনিক ডিভাইসে 1 ইঞ্চি প্রশস্ত একটি বাটন তৈরি করতে পারি। যতদূর আমি জানি এটি ওয়েব পরিবেশে বর্তমানে সম্ভব নয়। আমি কিছু মিস করেছি?

— trusktr

Answer 1

আপনি প্রকৃত শারীরিক মাত্রা বা আসল ডিপিআই পেতে পারবেন না এবং আপনি পারলেও তাদের সাথে কিছু করতে পারবেন না।

এটি একটি দীর্ঘ দীর্ঘ এবং জটিল গল্প, তাই আমাকে ক্ষমা করুন।

ওয়েব এবং সমস্ত ব্রাউজারগুলি 1 পিএক্সকে সিএসএস পিক্সেল নামে একক হিসাবে সংজ্ঞায়িত করে। একটি সিএসএস পিক্সেল একটি আসল পিক্সেল নয়, বরং এমন একক যা ডিভাইসের দেখার কোণের ভিত্তিতে একটি ইঞ্চি 1/96 তম বলে মনে করা হয়। এটি রেফারেন্স পিক্সেল হিসাবে নির্দিষ্ট করা হয়েছে ।

রেফারেন্স পিক্সেল হল একটি ডিভাইসের এক পিক্সেলের ভিজ্যুয়াল কোণ যা 96 ডিপিআই এর পিক্সেল ঘনত্ব এবং একটি বাহুর দৈর্ঘ্যের পাঠকের থেকে দূরত্ব। নামমাত্র বাহুর দৈর্ঘ্য ২৮ ইঞ্চি পর্যন্ত ভিজ্যুয়াল কোণটি প্রায় 0.0213 ডিগ্রি। বাহুর দৈর্ঘ্যে পড়ার জন্য, 1px এভাবে প্রায় 0.26 মিমি (1/96 ইঞ্চি) এর সাথে মিলে যায়।

0.26 মিমি স্পেসে আমাদের কাছে অনেকগুলি রিয়েল ডিভাইস পিক্সেল থাকতে পারে।

ব্রাউজারটি মূলত উত্তরাধিকারগত কারণে হয় - বেশিরভাগ মনিটর ওয়েবের জন্মের সময় 96dpi ছিল - তবে ধারাবাহিকতার জন্য, "পুরানো দিনগুলিতে" 800x600 এ 15 ইঞ্চি পর্দার 22px বোতামটি 22px বোতামের দ্বিগুণ হবে 1600x1200 এ একটি 15 ইঞ্চি মনিটর। এক্ষেত্রে পর্দার ডিপিআই আসলে 2x (রেজোলিউশনের দ্বিগুণ হলেও একই শারীরিক স্থানে)। এটি ওয়েব এবং অ্যাপ্লিকেশনগুলির জন্য খারাপ পরিস্থিতি, তাই বেশিরভাগ অপারেটিং সিস্টেমগুলি ডিভাইস স্বতন্ত্র ইউনিটগুলিতে পিক্সেল মানগুলি বিমূর্ত করার জন্য অনেকগুলি উপায় তৈরি করে (অ্যান্ড্রয়েডে ডিআইপিএস, আইওএসের উপর পিটি এবং ওয়েবে সিএসএস পিক্সেল )।

আইফোন সাফারি ব্রাউজারটি প্রথম (আমার জ্ঞানের) ভিউপোর্টের ধারণাটি প্রবর্তন করেছিল। এটি একটি ছোট স্ক্রিনে রেন্ডার করার জন্য পূর্ণ ডেস্কটপ স্টাইল অ্যাপ্লিকেশন সক্ষম করতে তৈরি করা হয়েছিল। ভিউপোর্টটি 960px প্রশস্ত হিসাবে সংজ্ঞায়িত করা হয়েছিল। এটি মূলত পৃষ্ঠটি 3x (আউটফোনটি মূলত 320px) জুম করে তাই 1 সিএসএস পিক্সেল দৈহিক পিক্সেলের 1 / তৃতীয়াংশ। আপনি যখন ভিউপোর্টটি সংজ্ঞায়িত করেছেন যদিও আপনি এই ডিভাইসটি 163 ডিপিআইতে 1 টি সিএসএস পিক্সেল = 1 রিয়েল পিক্সেলের সাথে মেলে।

প্রস্থটি "ডিভাইস-প্রস্থ" যেখানে একটি ভিউপোর্ট ব্যবহার করে আপনাকে প্রতি ডিভাইস ভিত্তিতে ভিউপোর্টের প্রস্থকে সর্বোত্তম সিএসএস পিক্সেল আকারে সেট আপ থেকে মুক্তি দেয়, ব্রাউজারটি কেবল এটি আপনার জন্য করে।

ডাবল ডিপিআই ডিভাইসগুলির প্রবর্তনের সাথে, মোবাইল ফোন নির্মাতারা মোবাইল পৃষ্ঠাগুলি 50% ছোট আকারে দেখাতে চায়নি তাই তারা ডিভাইস পিক্সেলরতিও নামে একটি ধারণা চালু করেছিল (আমি বিশ্বাস করি যে মোবাইল ওয়েবকিটটিতে প্রথম), এটি তাদের 1 টি সিএসএস পিক্সেল মোটামুটি 1 / রাখতে দেয় ইঞ্চির 96 তম তবে আপনাকে বুঝতে দিন যে আপনার সম্পদের যেমন চিত্রগুলির দ্বিগুণ আকারের প্রয়োজন হতে পারে। আপনি যদি আইফোন সিরিজের দিকে লক্ষ্য করেন তবে তাদের সমস্ত ডিভাইস বলবে যে সিএসএস পিক্সেলের পর্দার প্রস্থ 320px , যদিও আমরা জানি এটি সত্য নয়।

সুতরাং আপনি যদি সিএসএস স্পেসে 22px হওয়ার জন্য একটি বোতাম তৈরি করেন তবে দৈহিক পর্দার উপস্থাপনা 22 * ​​ডিভাইস পিক্সেল অনুপাত। আসলে আমি এটি বলছি, এটি ঠিক এটি নয় কারণ ডিভাইস পিক্সেল অনুপাতটি কখনই ঠিক সঠিক হয় না, ফোন নির্মাতারা এটি 2.1329857289918 এর চেয়ে 2.0, 3.0 এর মতো একটি দুর্দান্ত সংখ্যায় সেট করে ....

সংক্ষেপে, সিএসএস পিক্সেলগুলি ডিভাইস স্বতন্ত্র এবং আসুন স্ক্রিনগুলির শারীরিক আকার এবং প্রদর্শন ঘনত্ব ইত্যাদির বিষয়ে আমাদের উদ্বিগ্ন হওয়ার দরকার নেই etc.

গল্পটির নৈতিকতা হ'ল: পর্দার দৈহিক পিক্সেল আকার বোঝার বিষয়ে চিন্তা করবেন না। তোমার দরকার নেই 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://viewport आकार.com/
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• http://en.wikedia.org/wiki/Device_ind dependent_pixel
• http://www.w3.org/TR/css3-values/#abs کسان- দৈর্ঘ্য
• https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Comments

@ ম্যাট এটি ট্যাবলেটগুলিতে একই হবে। রেটিনা ম্যাক বইয়ের মতো এটি। লক্ষ্যটি হ'ল "সিএসএস পিক্সেল" সমস্ত প্ল্যাটফর্মের তুলনায় তুলনামূলকভাবে সমান, বিশেষত যদি আপনি ভিউপোর্টের প্রস্থ = ডিভাইস-প্রস্থ সেট করেন।

— কিনলান

আপনি বলেছিলেন "আপনি তাদের সাথে কিছুই করতে পারবেন না।" আমি একমত নই এই তথ্যের সাহায্যে আমি একটি ফন্ট সেট করতে সক্ষম হব যা সর্বদা উচ্চতা 16 পয়েন্ট (একটি বাস্তব-বিশ্বের ইঞ্চির 16 / 72nd) হয়। এটি অমূল্য এবং ওয়েব বিকাশের চেয়ে দেশীয় বিকাশ আরও শক্তিশালী হতে চলেছে তার অন্যতম কারণ।

— trusktr

প্রকৃতপক্ষে, পিক্সেলগুলিতে সত্যিকারের পর্দার আকারের জন্য উপযুক্ত যুক্তিসঙ্গত ব্যবহার হ'ল উপযুক্ত রেজোলিউশন সহ একটি পটভূমি চিত্র সরবরাহ করা।

— নটহাগো

"সমস্ত মোবাইল ডিভাইসগুলিতে প্রায় 50px দেখতে একইরকম হওয়া উচিত" দয়া করে প্রমাণ করুন যে উদাহরণস্বরূপ 1200x1920 4 ইঞ্চি ফোন এবং 1000x600 10 ইঞ্চি ট্যাবলেট প্রতিটিটির পাশে ব্যবহার করে।

— Iilgegex

"এগুলির সাথে আপনি কিছু করতে পারবেন না" - এর সাথেও আমি একমত নই: ডিভাইসটি কোনও ফোন বা একটি ট্যাবলেট নির্ভরযোগ্যতার সাথে আপনি সনাক্ত করতে পারেন এবং ধরে নিতে পারেন যে ব্যবহারকারী সহজেই তাদের আঙুল দিয়ে স্ক্রিনের উপরে পয়েন্ট করতে পারে বা না।

— ব্রায়ান ক্যানার্ড 24'18

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স্পষ্টত সংজ্ঞায়িত না হওয়ায় আমি এনএএন পেয়েছি ।

— মাইকেল

Answer 3

আপনি যে কোনও পৃষ্ঠা উপাদান তৈরি করতে পারেন এবং প্রকৃত শারীরিক ইউনিট ব্যবহার করে এর প্রস্থ সেট করতে পারেন। উদাহরণ স্বরূপ

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

এবং তারপরে পিক্সেলগুলির প্রস্থ পান। উদাহরণস্বরূপ নীচের এইচটিএমএল কোড (আমি জ্যাকিউরি ব্যবহার করেছি) সেন্টিমিটারে ডিভাইসের স্ক্রিন প্রস্থ দেখায়

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

alert(widthCM);
</script>

Comments

বাহ আমি কখনই বুঝতে পারি নি যে আপনি CSS এর মাধ্যমে এটি করতে পারেন। এটা কতটা সঠিক? আপনার ব্রাউজারটি কীভাবে আপনার স্ক্রিনের শারীরিক মাত্রা জানতে পারে? Caniuse.com এ কোথাও ব্রাউজারের সামঞ্জস্যতা রয়েছে ? আমি এটি খুঁজে পাচ্ছি না।

— জ্যাক উইলসন

ডাব্লু 3 সি সাইট বলেছে: "অতীতে, সিএসএসের প্রয়োজনীয়তা ছিল কম্পিউটার স্ক্রিনেও বাস্তবায়নগুলি নিখুঁত ইউনিটগুলি সঠিকভাবে প্রদর্শন করতে পারে But তবে ভুল বাস্তবায়নের সংখ্যাটি সঠিক সংখ্যার চেয়ে অনেক বেশি এবং পরিস্থিতি উন্নতি বলে মনে হয় না, তাই সিএসএস ২০১১ সালে এই প্রয়োজনীয়তাটি ত্যাগ করে Currently , নিখুঁত ইউনিটগুলি কেবলমাত্র মুদ্রিত আউটপুট এবং উচ্চ-রেজোলিউশন ডিভাইসে সঠিকভাবে কাজ করতে হবে CSS সিএসএস "হাই রেজোলিউশন" অর্থ কী তা নির্ধারণ করে না But তবে আজকাল লো-এন্ড প্রিন্টারগুলি 300 ডিপিআই থেকে শুরু হয় এবং উচ্চ-শেষ স্ক্রিনগুলি 200 ডিপিআইতে রয়েছে, কাটা বন্ধ সম্ভবত কোথাও কোথাও আছে। "

— মাইক 11

আমি মনে করি যে অন্য কোনও নেটিভ অ্যাপ্লিকেশনের মতো ব্রাউজার ডিভাইস ড্রাইভার দ্বারা ওএসকে সরবরাহ করা ওএস এপিআইয়ের মাধ্যমে ডিভাইস রেজোলিউশন পেতে পারে। নির্ভুলতা এই তথ্যের উপর নির্ভর করে।

— মাইক 12

তবে ডিভাইস রেজোলিউশন প্রকৃত শারীরিক মাত্রার মতো নয়। একটি 14 "ল্যাপটপ এবং 15" ল্যাপটপের একই রেজোলিউশন থাকতে পারে।

— জ্যাক উইলসন

না! আপনি পারবেন না। CSS এ 10 সেন্টিমিটারের বাস্তবে ভিন্ন আকার থাকবে। এটি ভাগ্যের ক্ষেত্রে খাঁটি বিষয় যদি এটিতে 10 সেমি, 12 সেমি বা 7 সেমি থাকে। ভুল সমাধানগুলি ফিরিয়ে আনার সমাধানের ভিত্তিতে আমার জাসফিল্ড ডেমোটি এখানে রয়েছে, যেহেতু ব্রাউজারগুলি সর্বদা তাদের প্রতি ইঞ্চি পিক্সেল (ডিপিআই) এর মতো আচরণ করে: jsfiddle.net/Lzsm3zo9

— সিকোরস্কি

Answer 4

আপনি ডাব্লুএফএফএল দিয়ে এই তথ্যটি পেতে পারেন:

ডিভাইস প্রদর্শন বৈশিষ্ট্য

বৈশিষ্ট্যগুলি বলা হয়:

resolution_(width|height)

physical_display_(width|height)

দীর্ঘ সংস্করণ:

এটি অর্জনের জন্য সর্বোত্তম এবং নির্ভরযোগ্য কৌশল হ'ল user agent stringব্রাউজার থেকে একটি ডিবিতে আধুনিক ডিবি WURFL(বা অন্য কোনও) প্রেরণ করা যা প্রয়োজনীয় তথ্য সরবরাহ করতে পারে।

ব্যবহারকারী এজেন্ট স্ট্রিং

এটি সমস্ত আধুনিক ব্রাউজারগুলি সরবরাহ করতে পারে এমন তথ্যগুলির একটি অংশ; এটি ডিভাইস এবং এটির OS সম্পর্কে তথ্য প্রকাশ করে। এটি যেমন কোনও অভিধানের সাহায্য ছাড়াই আপনার অ্যাপ্লিকেশনটির পক্ষে যথেষ্ট অর্থবহ নয় 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পিক্সেল পর্যায়ে আঁকা ব্যবহার করা যেতে পারে যাই হোক না কেন স্পষ্টতা জন্য আপনাকে ব্যবহার করতে চান সেটি (অন্যথায়, কি, পিক্সেল লক্ষ লক্ষ থাকার ডান দিকে বিন্দু?)। ভাল, না। সমস্ত ইউনিট একটি মেট্রিক ইউনিটের ভগ্নাংশ, এই সমস্ত ইউনিটকে কেবল আলাদা স্কেল তৈরি করে। গল্পের মধ্যে সবচেয়ে খারাপটি হ'ল এগুলির কোনওটিই সঠিক নয়। কেবল ডাব্লু 3 স্কুলগুলির সাথে খেলুন (একটি 20 সেমি লাইন আঁকুন এবং এটি কোনও শাসকের সাথে পরিমাপ করুন)।

শেষ তাই: - সেখানে সঠিকভাবে শারীরিক মাত্রা (যা দিয়ে মামলা করা উচিত সঙ্গে কিছু আঁকা কোন উপায় নেই cm, mm, in, এবং শেষ পর্যন্ত ptএবং pc)। - পর্দার আকার এবং রেজোলিউশনের (যা কমপক্ষে ক্ষেত্রে হওয়া উচিত px) স্বাধীনভাবে একই আকারের সাথে কিছু আঁকার উপায় নেই ।

এটি উভয়ই একটি বাস্তবায়ন সমস্যা (প্রকৃত পর্দার আকার ব্যবহৃত হচ্ছে না) এবং ডিজাইন সমস্যা (এর pxজন্য ইতিমধ্যে অনেকগুলি ইউনিট থাকা অবস্থায় কেন পর্দার আকারের চেয়ে আলাদা হওয়া উচিত )।

Answer 6

আমি আমার ওয়েব প্রকল্পগুলির একটিতে এই সমস্যাটি মোকাবিলা করেছি http://www.vinodiscover.com উত্তরটি হ'ল শারীরিক আকার কী তা আপনি নির্দিষ্ট করে জানতে পারবেন না তবে আপনি একটি আনুমানিকতা পেতে পারেন। জেএস এবং / অথবা সিএসএস ব্যবহার করে আপনি ভিউপোর্ট / স্ক্রিনের প্রস্থ এবং উচ্চতা এবং মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে পিক্সেল ঘনত্ব পেতে পারেন। উদাহরণস্বরূপ: আইফোন 5 (326 পিপিআই) = 320px বাই 568px এবং একটি 2.0 পিক্সেল ঘনত্ব, যখন একটি স্যামসং গ্যালাক্সি এস 4 (441ppi) = 360px x 640px এবং একটি 3.0 পিক্সেল ঘনত্ব। কার্যকরভাবে একটি 1.0 পিক্সেল ঘনত্ব 150 পিপিআই এর কাছাকাছি।

এটি দেওয়া, আমি পিক্সেল ঘনত্ব নির্বিশেষে, প্রস্থটি 284px এর কম হলে 1 কলামটি দেখানোর জন্য আমার সিএসএস সেট করেছি; তারপরে 284px এবং 568px এর মধ্যে দুটি কলাম; তারপরে 852px এর উপরে 3 টি কলাম। ব্রাউজারগুলি এখন পিক্সেল ঘনত্বের গণনা স্বয়ংক্রিয়ভাবে করে চলেছে বলে মনে হয় এটি আরও সহজ।

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

Comments

দেশীয় বিকাশে আপনি সঠিক মান পেতে পারেন। নেটিভের জন্য +1, ওয়েবের জন্য -1।

— trusktr

আপনি কি অ্যান্ড্রয়েডে সঠিক শারীরিক আকার পেতে পারেন?

— অ্যাপোলো ক্লার্ক

হ্যাঁ: stackoverflow.com/questions/3166501/...

— trusktr

Answer 7

রেজুলেশনটি সন্ধানের জন্য ডাব্লুআরএফএল ব্যবহারের বিষয়ে জেহেলভিউনের জবাবের প্রতিক্রিয়া হিসাবে, এটিও উল্লেখযোগ্য যে ডাব্লুউরএফএল একটি জাভাস্ক্রিপ্ট স্নিপেট হিসাবেও উপলব্ধ ।

Wurfl.io এ দেওয়া নিখরচায় সংস্করণে , আপনি পর্দা এবং রেজোলিউশন সম্পর্কে তথ্য পাবেন না (কেবলমাত্র ডিভাইসের নাম, ফর্ম ফ্যাক্টর এবং মোবাইল / মোবাইল নয়) তবে এখানে আরও বেশি ক্ষমতা সহ বাণিজ্যিক সংস্করণ রয়েছে ।

Comments

আমি এই নির্দিষ্ট উত্তরের মন্তব্যে থাকার পরামর্শ দিই।

— অন্ধকার

এটি এমন একটি হাস্যকর জটিল সমাধান যা ব্রাউজারের দ্বারা কেবল স্থানীয়ভাবে সরবরাহ করা উচিত।

— মাইকেল

Answer 8

সিএসএস পিক্সেলগুলি আসলে আমাদের "ডিভাইস ইন্ডিপেন্ডেন্ট পিক্সেল" নয়। ওয়েব প্ল্যাটফর্মে বিভিন্ন ধরণের ডিভাইস থাকে। সিএসএস পিক্সেল হ্যান্ডহেল্ডগুলিতে বেশ সামঞ্জস্যপূর্ণ বলে মনে হচ্ছে, তবে এটি একটি সাধারণ 96dpi ডেস্কটপ মনিটরে 50% বড় হবে। আমার প্রশ্ন দেখুন । এটি কিছু ক্ষেত্রে সত্যিই খারাপ জিনিস নয়, উদাহরণস্বরূপ ফন্টগুলি বড় স্ক্রিনে বড় হওয়া উচিত, যেহেতু চোখের দূরত্ব আরও বড়। তবে ইউআই উপাদানগুলির মাত্রা বেশ সামঞ্জস্যপূর্ণ হওয়া উচিত। আসুন ধরা যাক আপনার অ্যাপটির উপরে একটি শীর্ষ বার রয়েছে, আপনি বরং এটি ডেস্কটপ এবং মোবাইলগুলিতে একই পুরুত্ব হিসাবে দেখতে চান, ডিফল্টরূপে এটি 50% ছোট হবে, যা ভাল নয়, কারণ স্পর্শযোগ্য উপাদানগুলি আরও বড় হওয়া উচিত। আমি খুঁজে পেয়েছি যে একমাত্র কাজটি ডিভাইস ডিপিআইয়ের উপর ভিত্তি করে বিভিন্ন স্টাইল প্রয়োগ করা।

উইন্ডো.ডভাইসপিক্সেলরটিও সহ আপনি জাভাস্ক্রিপ্টে স্ক্রিন ডিপিআই পেতে পারেন। বা সিএসএস ক্যোয়ারী:

@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

আমি আপনার মন্তব্যে লক্ষ্য করেছি যে আপনি যে আকারের বোতামগুলি এবং এমন কি দর্শকের কাছে উপস্থিত হওয়ার সাথে প্রকৃতই উদ্বিগ্ন ছিলেন।

আমার একই সমস্যা ছিল, যতক্ষণ না আমি আবিষ্কার করেছি যে এটি প্রাথমিক স্কেল সেট করার জন্য এইচটিএমএল শিরোনামে একটি মেটা ট্যাগ যুক্ত করার বিষয়টি ছিল:

<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

শুভ ভাগ্য ড্যানি 117

Comments

সেগুলি ভার্চুয়াল মাত্রা, যা সর্বদা শারীরিক বাস্তব-বিশ্বের মাত্রা নয়।

— trusktr

ধন্যবাদ আমি তা জানতাম না

— 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

পিক্সেলপথে কেন ?! রঙ গভীরতার সাথে পিক্সেল ডিপথ সম্পর্কিত নয়, এক্ষেত্রে আমি ভাবছি যে এটি এখানে গণনার সাথে কীভাবে প্রাসঙ্গিক ....

— ম্যাটানস্টার

Answer 12

হেই আশা করি আমি এর উত্তর দিতে পারলাম তবে গিকস বিল্ডিং এপিআইগুলি মৌলিক প্রয়োজনীয়তা এবং বিমূর্ত জিনিসগুলিকে অনেক সময় সরবরাহ করে না।

বিটিডব্লিউ আমার কাছে 40 বছর বয়সী ইউআই এবং সফটওয়্যার ডিজাইনের ডিজাইনের অভিজ্ঞতা রয়েছে এবং "ভিসা" ড্রাইভারের দিনগুলির আগে থেকেই চিরকালের মতো মনে হচ্ছে কেবল এটির জন্য চাপ দিচ্ছিলাম :)।

টাচ স্ক্রিনের জন্য আমার কাছে একটি জিনিস ছিল যা আমি "ফিঙ্গার সাইজ ()" বলেছিলাম যা পিক্সেলের সংখ্যা ছিল 1 সেন্টিমিটার (আঙুলের গড় স্পর্শের ক্ষেত্রের ব্যাসের খুব কাছাকাছি) তবে মূল ডেটমামটি "ডিপিএমসিএম"।

আপনি যে প্রদর্শনটির জন্য অন্য জিনিসটি চান তা হ'ল "দর্শন কোণ" touch

    (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. 

আমরা আমাদের এপিআইগুলিতে এটি দেওয়ার চেষ্টা করি তবে হায় আফসোস অনেক ক্ষেত্রেই পাওয়া যায়।

Answer 13

আপনি আকারের মোটামুটি অনুমান পেতে পারেন, তবে এটি সঠিক নয়।

ফলাফলগুলি কী হয়েছিল তা দেখার জন্য আমি একটি উদাহরণ রেখেছি যা আমি দু'টি ডিভাইসে পরীক্ষা করেছি। আমার আইফোন 6 প্রায় 33% বড় মান দেয় returns আমার ম্যাকের আমার 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/ful/xOAPYB/

Comments

আমার 40 ইঞ্চি 22 ইঞ্চি হিসাবে রিপোর্ট করেছে।

— রোবটরক

আমার পক্ষেও সঠিক নয়। আমি মনে করি সমস্যাটি কারণেই হয়েছে window.devicePixelRatio। এটি একটি অ্যাপল থান্ডারবোল্ট স্ক্রিনে 1 এবং ম্যাকবুক প্রো টাচবার 15 এ 2। "এই মানটি কি সর্বদা পূর্ণসংখ্যা হয়? এটি অনুপাত হওয়ায় এটি বোঝা যায় না Other অন্যান্য উপাদান: Stackoverflow.com/questions/16385573/...

— টম

এটি সম্ভবত ২০১ 2016 সালে খুব ভাল ছিল না, তবে এটি আমার ডেস্কটপ পিসির জন্য 45 "স্ক্রিন সাইজের (আসল আকার 40") এবং 10 "আমার গ্যালাক্সি এস 10 + এর জন্য প্রতিবেদন করে, যা উভয়ই যথেষ্ট পরিমাণে কাছে অর্থাত্ বিভিন্ন স্কেলের মধ্যে পার্থক্য করার জন্য ইউআই এবং নথিগুলির সংস্করণগুলি sure যদিও $ যদিও সমস্ত ভেরিয়েবল উপসর্গ করে তা নিশ্চিত নয়

— আলেকজান্ডার গ্রাফ