ওয়েব অ্যাপে বিভিন্ন স্ক্রিন সাপোর্ট করে

Android বিভিন্ন ধরনের স্ক্রিন সাইজ ও পিক্সেল ডেনসিটি সহ ডিভাইসে উপলভ্য হওয়ার কারণে, আপনার ওয়েব ডিজাইনে এইসব ফ্যাক্টরকে বিবেচনা করুন যাতে আপনার পৃষ্ঠাগুলি উপযুক্ত সাইজের হয়। WebView আপনার ওয়েব কন্টেন্ট যথাযথভাবে রেন্ডার করতে সাহায্য করার জন্য DOM, CSS ও মেটা ট্যাগ ফিচার কাজ করে।

Android-পরিচালিত ডিভাইসের জন্য আপনার ওয়েবপেজ টার্গেট করার সময়, দুটি প্রধান বিষয় বিবেচনা করতে হবে:

ভিউপোর্ট
ভিউপোর্ট হল আয়তাকার অংশ যা আপনার ওয়েবপেজের জন্য ড্র করার মতো জায়গা প্রদান করে। আপনি ভিউপোর্ট প্রপার্টির বিভিন্ন বিষয় নির্দিষ্ট করতে পারেন, যেমন এর সাইজ ও প্রাথমিক স্কেল। সবচেয়ে গুরুত্বপূর্ণ হল viewport উইডথ, যা ওয়েবপেজের দৃষ্টিভঙ্গির দিক থেকে উপলভ্য মোট অনুভূমিক পিক্সেলের সংখ্যাকে নির্ধারণ করে—উপলভ্য CSS পিক্সেলের সংখ্যা।
স্ক্রিন ডেনসিটি
WebView ক্লাস এবং Android-এর বেশিরভাগ ওয়েব ব্রাউজার আপনার CSS পিক্সেল ভ্যালুকে ডেন্সিটি-ইনডিপেন্ডেন্ট পিক্সেল ভ্যালুতে কনভার্ট করে, তাই আপনার ওয়েব পেজ মাঝারি ডেন্সিটি স্ক্রিনের মতো একই রকম সাইজে দেখা যায়—প্রায় ১৬০ ডিপিআই। তবে, আপনার ওয়েব ডিজাইনে গ্রাফিক্স গুরুত্বপূর্ণ হলে, বিভিন্ন ডেনসিটিতে স্কেলিংয়ের দিকে নজর দিন। যেমন, ৩২০ dpi স্ক্রিনে ৩০০ পিক্সেল চওড়া কোনও ছবি স্কেল-আপ করা হলে—এটি CSS পিক্সেল প্রতি আরও বেশি ফিজিক্যাল পিক্সেল ব্যবহার করে। এর ফলে ছবি অস্পষ্ট হয়ে যাওয়া ও পিক্সেল ফেটে যাওয়ার মতো আর্টিফ্যাক্ট তৈরি হতে পারে। সহজ করার জন্য, Android বেশিরভাগ ছোট স্ক্রিন ডেনসিটি কয়েকটি সাধারণ বিভাগে ভাগ করে: ছোট, মাঝারি ও বড়। স্ক্রিন ডেনসিটি সম্পর্কে আরও জানতে, বিভিন্ন পিক্সেল ডেনসিটি কাজ করে লিঙ্কটি পড়ুন।

এইসব সম্পর্কিত রিসোর্স দেখুন:

ভিউপোর্ট প্রপার্টি নির্দিষ্ট করা

ভিউপোর্ট হল সেই জায়গা যেখানে আপনার ওয়েবপেজ দেখানো হয়। যদিও ভিউপোর্টের মোট দৃশ্যমান এরিয়া সম্পূর্ণ জুম-আউট করা হলে স্ক্রিনের সাইজের সাথে মিলে যায়, তবে ভিউপোর্টের নিজস্ব পিক্সেল ডাইমেনশন আছে যা এটি ওয়েব পৃষ্ঠার জন্য উপলভ্য করে। যেমন, কোনও ডিভাইসের স্ক্রিনের ফিজিক্যাল প্রস্থ ৪৮০ পিক্সেল হলেও, ভিউপোর্টের প্রস্থ ৮০০ পিক্সেল হতে পারে। এর ফলে, ভিউপোর্ট স্কেল ১.০ হলে, ৮০০ পিক্সেল চওড়া ডিজাইন করা ওয়েবপেজ স্ক্রিনে সম্পূর্ণ দেখা যায়।

Android-এ বেশিরভাগ ওয়েব ব্রাউজার—Chrome সহ—ডিফল্ট হিসেবে ভিউপোর্টকে বড় সাইজে সেট করে। এই _ওয়াইড ভিউপোর্ট মোড_ প্রায় ৯৮০ পিক্সেল চওড়া। এছাড়াও, অনেক ব্রাউজার ডিফল্ট হিসেবে যতটা সম্ভব জুম আউট করে যাতে সম্পূর্ণ ভিউপোর্ট প্রস্থ দেখা যায়, এটি _ওভারভিউ মোড_ নামে পরিচিত।

আপনার ডকুমেন্টে <meta name="viewport" ...> ট্যাগ ব্যবহার করে আপনার ওয়েবপেজের ভিউপোর্টের প্রপার্টি, যেমন প্রস্থ ও প্রাথমিক জুম লেভেল, নির্ধারণ করতে পারবেন <head>।

নিচে দেওয়া সিনট্যাক্স থেকে সব কাজ করে এমন ভিউপোর্ট প্রপার্টি এবং প্রতিটি প্রপার্টিতে গ্রহণযোগ্য ভ্যালুর ধরন সম্পর্কে জানতে পারবেন:

<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 মিডিয়া ফিচার যা আপনাকে নির্দিষ্ট স্ক্রিন ডেনসিটির জন্য স্টাইল তৈরি করতে দেয়। এই ফিচারে আপনি যে ভ্যালু প্রয়োগ করবেন সেটি অবশ্যই ০.৭৫, ১ বা ১.৫ হতে হবে। এটি যথাক্রমে কম-, মাঝারি- বা হাই-ডেনসিটি স্ক্রিনযুক্ত ডিভাইসের জন্য স্টাইল নির্দেশ করে।

আপনি প্রতিটি ডেনসিটির জন্য আলাদা আলাদা স্টাইলশিট তৈরি করতে পারবেন:

<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 ছবি দেখুন।

জাভাস্ক্রিপ্টের মাধ্যমে টার্গেট ডিভাইসের ঘনত্ব

WebView window.devicePixelRatio-এর সাথে কাজ করে, এটি একটি DOM প্রপার্টি যা আপনাকে বর্তমান ডিভাইসের ডেনসিটি কোয়েরি করতে দেয়। এই প্রপার্টির ভ্যালু বর্তমান ডিভাইসের জন্য ব্যবহৃত স্কেলিং ফ্যাক্টর নির্দিষ্ট করে। window.devicePixelRatio-এর ভ্যালু ১.০ হলে, ডিভাইসটিকে মাঝারি ডেনসিটি ডিভাইস হিসেবে বিবেচনা করা হয় এবং ডিফল্ট হিসেবে কোনও স্কেলিং প্রয়োগ করা হয় না। ভ্যালু ১.৫ হলে, ডিভাইসটি হাই-ডেনসিটি ডিভাইস হিসেবে বিবেচনা করা হয় এবং পৃষ্ঠাটি ডিফল্ট হিসেবে ১.৫x স্কেল করা হয়। ভ্যালু ০.৭৫ হলে, ডিভাইসটিকে কম-ঘনত্বের ডিভাইস হিসেবে বিবেচনা করা হয় এবং পৃষ্ঠাটি ডিফল্ট হিসেবে ০.৭৫x স্কেল করা হয়।

Android ব্রাউজার ও 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");
}