এটি মোবাইল ওয়েব সম্পর্কে প্রতিটি নিবন্ধে উল্লেখ করা হয়েছে, তবে কোথাও এই বৈশিষ্ট্যটি পরিমাপ করে না তার কোনও ব্যাখ্যা আমি পাই না can
কেউ কি দয়া করে এই চেকটির মতো প্রশ্নগুলি বিশদভাবে বর্ণনা করতে পারেন?
@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
}উত্তর:
ডিভাইস পিক্সেল অনুপাতটি দৈহিক পিক্সেল এবং লজিকাল পিক্সেলের মধ্যে অনুপাত। উদাহরণস্বরূপ, আইফোন 4 এবং আইফোন 4 এস একটি ডিভাইস পিক্সেল অনুপাত 2 এর প্রতিবেদন করে, কারণ দৈহিক রৈখিক রেজোলিউশন লজিকাল লিনিয়ার রেজোলিউশনের দ্বিগুণ।
সূত্রটি হ'ল:
কোথায়:
হয় শারীরিক রৈখিক রেজল্যুশন
এবং:
লজিকাল লিনিয়ার রেজোলিউশন
অন্যান্য ডিভাইসগুলি অ-পূর্ণসংখ্যাসহ বিভিন্ন ডিভাইস পিক্সেল অনুপাতের প্রতিবেদন করে। উদাহরণস্বরূপ, নোকিয়া লুমিয়া 1020 1.6667, স্যামসামগ গ্যালাক্সি এস 4 রিপোর্ট 3 এবং অ্যাপল আইফোন 6 প্লাস রিপোর্ট করেছে 2.46 (উত্স: dpilove ) । তবে এটি নীতিগতভাবে কিছু পরিবর্তন করে না, কারণ আপনার কোনও একটি নির্দিষ্ট ডিভাইসের জন্য কখনই নকশা করা উচিত নয়।
সিএসএস "পিক্সেল" এমনকি "কিছু স্ক্রিনের একটি চিত্র উপাদান" হিসাবে সংজ্ঞায়িত করা হয়নি, বরং দেখার কোণের একটি অ-লিনিয়ার কৌণিক পরিমাপ হিসাবে , যা
বাহুর দৈর্ঘ্যে প্রায় এক ইঞ্চি। উত্স: সিএসএস সম্পূর্ণ দৈর্ঘ্য
ওয়েব ডিজাইনের ক্ষেত্রে এটির প্রচুর প্রভাব রয়েছে যেমন হাই-ডেফিনেশন ইমেজ রিসোর্স প্রস্তুত করা এবং সাবধানতার সাথে বিভিন্ন ডিভাইস পিক্সেল অনুপাতগুলিতে বিভিন্ন চিত্র প্রয়োগ করা। আপনি লো-এন্ড ডিভাইসটিকে খুব উচ্চতর রেজোলিউশন চিত্রটি ডাউনলোড করতে বাধ্য করতে চাইবেন না, কেবল এটি স্থানীয়ভাবে ডাউনস্কেল করতে। অস্পষ্ট ব্যবহারকারীর অভিজ্ঞতার জন্য আপনি হাই-এন্ড ডিভাইসগুলি কম রেজোলিউশন চিত্রগুলি আপস্কেল করতে চান না।
আপনি যদি বিটম্যাপ চিত্রের সাথে আটকে থাকেন, বিভিন্ন ডিভাইস পিক্সেল অনুপাতের জন্য উপযুক্ত হন, আপনার ডিভাইসের বিভিন্ন গোষ্ঠীর জন্য বিভিন্ন সেট সংস্থান সরবরাহ করতে 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'); }
}এইভাবে, প্রতিটি ডিভাইসের ধরণটি সঠিক চিত্রের সংস্থানটি লোড করে। এছাড়াও মনে রাখবেন যে pxসিএসএসের ইউনিট সর্বদা লজিক্যাল পিক্সেলগুলিতে পরিচালনা করে ।
আরও বেশি সংখ্যক ডিভাইসের ধরণের উপস্থিতি উপস্থিত হওয়ার সাথে সাথে, তাদের সকলকে পর্যাপ্ত বিটম্যাপ সংস্থান সরবরাহ করা আরও জটিল হয়ে ওঠে। সিএসএসে, মিডিয়া ক্যোয়ারী বর্তমানে একমাত্র উপায়, এবং এইচটিএমএল 5 এ চিত্র উপাদান আপনাকে বিভিন্ন মিডিয়া প্রশ্নের জন্য বিভিন্ন উত্স ব্যবহার করতে দেয়, তবে বেশিরভাগ ওয়েব বিকাশকারীকে এখনও কিছু সময়ের জন্য আই 1111 সমর্থন করতে হবে বলে সমর্থনটি এখনও 100% নয় ( উত্স: ক্যানিজ ) ।
আপনার যদি আইকন, লাইন-আর্ট, ডিজাইন উপাদান নয় যা ফটোগুলি নয় তবে আপনার এসভিজি সম্পর্কে ভাবনা শুরু করা উচিত, যা সমস্ত রেজোলিউশনে সুন্দর করে স্কেল করে।
background-imageএটির সাথে একত্রিত করতে পারেন -webkit-background-size:50%, অন্যথায়, চিত্রের আকারটি লজিক্যাল পিক্সেল গণনা অনুসরণ করবে । w3.org/TR/2002/WD-css3-background-20020802/#background-size
background-sizeপ্রদর্শনটি সর্বোত্তমভাবে ব্যবহার করার কৌশলটি ব্যবহার করতে হবে।
ওয়েব বিকাশের বিশ্বে, ডিভাইস পিক্সেল অনুপাত (যাকে সিএসএস পিক্সেল অনুপাতও বলা হয়) হ'ল সিএসএস দ্বারা কোনও ডিভাইসের স্ক্রিন রেজোলিউশনকে কীভাবে ব্যাখ্যা করা হয় তা নির্ধারণ করে।
একটি ব্রাউজারের সিএসএস সূত্র দ্বারা কোনও ডিভাইসের লজিক্যাল (বা ব্যাখ্যা করা) সমাধান গণনা করে:
উদাহরণ স্বরূপ:
অ্যাপল আইফোন 6 এস
কোনও ওয়েব পৃষ্ঠা দেখার সময়, সিএসএস ভাববে যে ডিভাইসটির একটি 375x667 রেজোলিউশন স্ক্রিন রয়েছে এবং মিডিয়া ক্যোরিগুলি প্রতিক্রিয়া জানাবে যেন স্ক্রিনটি 375x667 । তবে পর্দায় রেন্ডার করা উপাদানগুলি প্রকৃত 375x667 স্ক্রিনের চেয়ে দ্বিগুণ তীক্ষ্ণ হবে কারণ দৈহিক স্ক্রিনে দ্বিগুণ শারীরিক পিক্সেল রয়েছে।
আরও কয়েকটি উদাহরণ:
স্যামসাং গ্যালাক্সি এস 4
আইফোন 5 এস
সিএসএস পিক্সেল অনুপাত তৈরি করার কারণটি কারণ ফোনের স্ক্রিনগুলির উচ্চতর রেজোলিউশন পাওয়া যায়, প্রতিটি ডিভাইসে যদি এখনও সিএসএস পিক্সেল অনুপাত 1 থাকে তবে ওয়েবপৃষ্ঠাগুলি দেখতে খুব কম রেন্ডার করে।
একটি সাধারণ পূর্ণ পর্দার ডেস্কটপ মনিটর মোটামুটি 24 "1920x1080 রেজোলিউশনে। ধারণা করুন যে যদি সেই মনিটরটি প্রায় 5 এ সঙ্কুচিত হয় তবে একই রেজোলিউশন থাকে had পর্দায় জিনিসগুলি দেখা অসম্ভব কারণ তারা এত ছোট হবে। তবে উত্পাদন করে এখন ধারাবাহিকভাবে 1920x1080 রেজোলিউশন ফোন স্ক্রিনগুলি নিয়ে আসছে।
সুতরাং ডিভাইস পিক্সেল অনুপাতটি ফোন নির্মাতারা উদ্ভাবন করেছিলেন যাতে তারা পর্দার উপাদান দেখতে বা পড়ার জন্য খুব ছোট করে না রেখে রেজোলিউশন, তীক্ষ্ণতা এবং ফোন স্ক্রিনের গুণমানকে এগিয়ে চলতে পারে।
এখানে একটি সরঞ্জাম যা আপনাকে আপনার বর্তমান ডিভাইসের পিক্সেল ঘনত্বও বলে:
width: 100%পুরো প্রস্থ হবে। এটি প্রসারিত করা হবে না। স্ক্রিনটি "চিন্তা করে" এটি একটি 300px প্রদর্শন। লজিকাল / সিএসএস রেজোলিউশন অনুযায়ী চিত্রগুলি প্রদর্শিত হয়। এখন, আপনার উদাহরণে আপনি এর পরিবর্তে 600px চিত্র সরবরাহ করতে পারেন। এটি লজিকাল 300px ডিসপ্লের সম্পূর্ণ প্রস্থ হবে, তবে আপনার প্রদর্শনটি স্থানীয় 600px হওয়ায় চিত্রটি আপনার মূল 300px চিত্রের চেয়ে দ্বিগুণ তীক্ষ্ণ দেখাবে। আরও বড় চিত্র, তবে ডিসপ্লেতে এই সমস্ত অতিরিক্ত পিক্সেল রয়েছে বলে এটি আরও ভাল দেখাচ্ছে। "রেটিনা প্রদর্শন" এর পিছনে এই ধারণাটি।
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-মুজ-ডিভাইস-পিক্সেল-অনুপাত
সিএসএস পিক্সেল প্রতি ডিভাইস পিক্সেলের সংখ্যা দেয়।
এটি প্রায় স্ব-ব্যাখ্যাকারী। একটি "ভার্চুয়াল" পিক্সেল (সিএসএসে আকার সেট) প্রদর্শন করতে কতগুলি "রিয়েল" পিক্সেল (পর্দার শারীরিক পিক্সার্লস) ব্যবহৃত হয় তার অনুপাতটিকে সংখ্যাটি বর্ণনা করে।
ভেরিয়েবল পিক্সেল ঘনত্বের জন্য বরিস স্মসের নিবন্ধের হাই ডিপিআই চিত্রগুলির ডিভাইস পিক্সেল অনুপাতের আরও সঠিক সংজ্ঞা রয়েছে: সিএসএস পিক্সেল প্রতি ডিভাইস পিক্সেলের সংখ্যা একটি ভাল আনুমানিক, তবে পুরো গল্পটি নয়।
মনে রাখবেন আপনি ডিপিআর এর সাহায্যে কোনও ডিভাইস ব্যবহার করতে পারবেন window.devicePixelRatio।
width=device-widthকরি এবং আমি এটি পুরো পর্দায় প্রসারিত করব?