যেহেতু অ্যান্ড্রয়েড বিভিন্ন ধরনের স্ক্রীন মাপ এবং পিক্সেল ঘনত্ব সহ ডিভাইসে উপলব্ধ, তাই আপনার ওয়েব ডিজাইনে এই বিষয়গুলিকে বিবেচনা করুন যাতে আপনার পৃষ্ঠাগুলি যথাযথভাবে মাপের হয়। WebView আপনাকে আপনার ওয়েব সামগ্রী যথাযথভাবে রেন্ডার করতে সাহায্য করার জন্য DOM, CSS এবং মেটা ট্যাগ বৈশিষ্ট্যগুলিকে সমর্থন করে৷
অ্যান্ড্রয়েড-চালিত ডিভাইসগুলির জন্য আপনার ওয়েব পৃষ্ঠাগুলিকে লক্ষ্য করার সময়, দুটি প্রধান কারণের জন্য অ্যাকাউন্ট করতে হবে:
- ভিউপোর্ট
- ভিউপোর্ট হল আয়তক্ষেত্রাকার এলাকা যা আপনার ওয়েব পৃষ্ঠার জন্য একটি অঙ্কনযোগ্য অঞ্চল প্রদান করে। আপনি বিভিন্ন ভিউপোর্ট বৈশিষ্ট্য নির্দিষ্ট করতে পারেন, যেমন এর আকার এবং প্রাথমিক স্কেল। সবচেয়ে গুরুত্বপূর্ণ হল ভিউপোর্ট প্রস্থ, যা ওয়েব পৃষ্ঠার দৃষ্টিকোণ থেকে উপলব্ধ অনুভূমিক পিক্সেলের মোট সংখ্যা সংজ্ঞায়িত করে — উপলব্ধ CSS পিক্সেলের সংখ্যা।
- পর্দার ঘনত্ব
-
WebViewক্লাস এবং অ্যান্ড্রয়েডের বেশিরভাগ ওয়েব ব্রাউজারগুলি আপনার CSS পিক্সেল মানগুলিকে ঘনত্ব-স্বাধীন পিক্সেল মানগুলিতে রূপান্তর করে, তাই আপনার ওয়েব পৃষ্ঠাটি একটি মাঝারি-ঘনত্বের স্ক্রীনের মতো অনুভূত আকারে প্রদর্শিত হয় - প্রায় 160 dpi৷ যাইহোক, যদি গ্রাফিক্স আপনার ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ উপাদান হয়, তাহলে বিভিন্ন ঘনত্বের স্কেলিংয়ে মনোযোগ দিন। উদাহরণস্বরূপ, একটি 320 ডিপিআই স্ক্রিনে 300 পিক্সেল চওড়া একটি চিত্রকে স্কেল করা হয়—এটি প্রতি CSS পিক্সেলের বেশি ফিজিক্যাল পিক্সেল ব্যবহার করে। এটি অস্পষ্টতা এবং পিক্সেলেশনের মতো শিল্পকর্ম তৈরি করতে পারে। সরলতার জন্য, অ্যান্ড্রয়েড বেশিরভাগ ছোট পর্দার ঘনত্বকে কয়েকটি সাধারণ বিভাগে ভেঙে দেয়: ছোট, মাঝারি এবং বড়। পর্দার ঘনত্ব সম্পর্কে আরও জানতে, বিভিন্ন পিক্সেল ঘনত্ব সমর্থন করুন পড়ুন।
নিম্নলিখিত সম্পর্কিত সংস্থান পড়ুন:
ভিউপোর্ট বৈশিষ্ট্য নির্দিষ্ট করুন
ভিউপোর্ট হল সেই এলাকা যেখানে আপনার ওয়েব পেজ আঁকা হয়। যদিও ভিউপোর্টের মোট দৃশ্যমান ক্ষেত্রটি স্ক্রীনের আকারের সাথে মিলে যায় যখন পুরোভাবে জুম করা হয়, ভিউপোর্টের নিজস্ব পিক্সেল মাত্রা রয়েছে যা এটি একটি ওয়েব পৃষ্ঠায় উপলব্ধ করে। উদাহরণস্বরূপ, যদিও একটি ডিভাইসের স্ক্রিনের শারীরিক প্রস্থ 480 পিক্সেল থাকতে পারে, ভিউপোর্টের প্রস্থ 800 পিক্সেল থাকতে পারে। ভিউপোর্ট স্কেল 1.0 হলে এটি 800 পিক্সেল চওড়ায় ডিজাইন করা একটি ওয়েব পৃষ্ঠা সম্পূর্ণরূপে স্ক্রিনে দৃশ্যমান হতে দেয়।
অ্যান্ড্রয়েডের বেশিরভাগ ওয়েব ব্রাউজার—ক্রোম সহ—ডিফল্টরূপে ভিউপোর্টকে একটি বড় আকারে সেট করে। এই _ওয়াইড ভিউপোর্ট মোড_ প্রায় 980 পিক্স চওড়া। অনেক ব্রাউজার সম্পূর্ণ ভিউপোর্ট প্রস্থ দেখানোর জন্য ডিফল্টরূপে যতদূর সম্ভব জুম আউট করে, যা _ওভারভিউ মোড_ নামে পরিচিত।
আপনি আপনার <head> <meta name="viewport" ...> ট্যাগ ব্যবহার করে আপনার ওয়েব পৃষ্ঠার জন্য ভিউপোর্টের বৈশিষ্ট্য নির্ধারণ করতে পারেন, যেমন প্রস্থ এবং প্রাথমিক জুম স্তর।
নিম্নলিখিত সিনট্যাক্স সমস্ত সমর্থিত ভিউপোর্ট বৈশিষ্ট্য এবং প্রতিটি দ্বারা গৃহীত মানগুলির প্রকারগুলি দেখায়:
<meta name="viewport"
content="
height = [pixel_value | "device-height"] ,
width = [pixel_value | "device-width"] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = ["yes" | "no"]
" />
উদাহরণস্বরূপ, নিম্নলিখিত <meta> ট্যাগটি নির্দিষ্ট করে যে ভিউপোর্টের প্রস্থ ডিভাইসের স্ক্রিনের প্রস্থের সাথে মেলে এবং জুম করার ক্ষমতা অক্ষম করা হয়েছে:
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
মোবাইল ডিভাইসের জন্য আপনার সাইট অপ্টিমাইজ করার সময়, আপনি সাধারণত প্রস্থটিকে "device-width" এ সেট করেন যাতে আকারটি সমস্ত ডিভাইসে ঠিক ফিট হয়, তারপরে বিভিন্ন স্ক্রীনের আকারের সাথে মানানসই লেআউটগুলিকে নমনীয়ভাবে মানিয়ে নিতে CSS মিডিয়া প্রশ্নগুলি ব্যবহার করুন৷
CSS দিয়ে ডিভাইসের ঘনত্ব লক্ষ্য করুন
WebView সমর্থন করে -webkit-device-pixel-ratio , যা একটি CSS মিডিয়া বৈশিষ্ট্য যা আপনাকে নির্দিষ্ট পর্দার ঘনত্বের জন্য শৈলী তৈরি করতে দেয়। এই বৈশিষ্ট্যটিতে আপনি যে মানটি প্রয়োগ করবেন তা অবশ্যই 0.75, 1, বা 1.5 হতে হবে, যাতে নির্দেশ করা যায় যে শৈলীগুলি যথাক্রমে নিম্ন-, মাঝারি- বা উচ্চ-ঘনত্বের স্ক্রীন সহ ডিভাইসগুলির জন্য।
আপনি প্রতিটি ঘনত্বের জন্য পৃথক স্টাইলশীট তৈরি করতে পারেন:
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
অথবা একটি স্টাইলশীটে বিভিন্ন শৈলী নির্দিষ্ট করুন:
#header {
background:url(medium-density-image.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
/* CSS for high-density screens */
#header {
background:url(high-density-image.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
/* CSS for low-density screens */
#header {
background:url(low-density-image.png);
}
}
বিভিন্ন স্ক্রিনের ঘনত্ব, বিশেষ করে ছবিগুলি পরিচালনা করার বিষয়ে আরও তথ্যের জন্য, পরিবর্তনশীল পিক্সেল ঘনত্বের জন্য উচ্চ DPI চিত্রগুলি দেখুন।
JavaScript দিয়ে ডিভাইসের ঘনত্ব লক্ষ্য করুন
WebView window.devicePixelRatio সমর্থন করে, যা একটি DOM বৈশিষ্ট্য যা আপনাকে বর্তমান ডিভাইসের ঘনত্ব অনুসন্ধান করতে দেয়। এই সম্পত্তির মান বর্তমান ডিভাইসের জন্য ব্যবহৃত স্কেলিং ফ্যাক্টর নির্দিষ্ট করে। যদি window.devicePixelRatio এর মান 1.0 হয়, তাহলে ডিভাইসটিকে একটি মাঝারি-ঘনত্বের ডিভাইস হিসেবে বিবেচনা করা হয় এবং ডিফল্টরূপে কোনো স্কেলিং প্রয়োগ করা হয় না। যদি মান 1.5 হয়, তাহলে ডিভাইসটিকে একটি উচ্চ-ঘনত্বের ডিভাইস হিসাবে বিবেচনা করা হয় এবং পৃষ্ঠাটি ডিফল্টরূপে 1.5x স্কেল করা হয়। যদি মান 0.75 হয়, তাহলে ডিভাইসটিকে একটি কম-ঘনত্বের ডিভাইস হিসাবে বিবেচনা করা হয় এবং পৃষ্ঠাটি ডিফল্টরূপে 0.75x স্কেল করা হয়।
অ্যান্ড্রয়েড ব্রাউজার এবং WebView যে স্কেলিং প্রয়োগ করে তা ওয়েব পৃষ্ঠার লক্ষ্য ঘনত্বের উপর ভিত্তি করে। ভিউপোর্ট লক্ষ্য ঘনত্ব সংজ্ঞায়িত বিভাগে বর্ণিত হিসাবে, ডিফল্ট লক্ষ্য হল মাঝারি-ঘনত্ব, কিন্তু আপনি লক্ষ্য পরিবর্তন করতে পারেন যে আপনার ওয়েব পৃষ্ঠাটি বিভিন্ন পর্দার ঘনত্বের জন্য কীভাবে স্কেল করা হয় তা প্রভাবিত করতে।
উদাহরণস্বরূপ, আপনি কীভাবে জাভাস্ক্রিপ্টের সাহায্যে ডিভাইসের ঘনত্ব সম্পর্কে প্রশ্ন করতে পারেন তা এখানে:
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
alert("This is a low-density screen");
}