প্রকাশিত: ফেব্রুয়ারি 28, 2014
আপনার WebView এর জন্য নিখুঁত ইন্টারফেস তৈরি করতে আপনি ব্যবহার করতে পারেন এমন অনেকগুলি বিকল্প রয়েছে৷
ভিউপোর্ট মেটা ট্যাগ সেট করুন
ভিউপোর্ট মেটা ট্যাগ আপনার ওয়েব অ্যাপে যোগ করার জন্য সবচেয়ে গুরুত্বপূর্ণ ট্যাগ। এটি ছাড়া, ওয়েবভিউ এমনভাবে কাজ করতে পারে যেন আপনার সাইটটি ডেস্কটপ ব্রাউজারগুলির জন্য ডিজাইন করা হয়েছে। এটি আপনার ওয়েব পৃষ্ঠাকে একটি বড় প্রস্থ (সাধারণত 980px) প্রদান করে এবং এটিকে WebView প্রস্থের সাথে মানানসই করে। বেশিরভাগ ক্ষেত্রে, এটির ফলে পৃষ্ঠার একটি ছোট ওভারভিউ সংস্করণ দেখা যায় যার জন্য ব্যবহারকারীকে প্রকৃত বিষয়বস্তু পড়ার জন্য প্যান এবং জুম করতে হয়।
আপনি যদি চান আপনার সাইটের প্রস্থ WebView এর প্রস্থের 100% হোক, ভিউপোর্ট মেটা ট্যাগ সেট করুন:
<meta name="viewport" content="width=device-width, initial-scale=1">
পৃষ্ঠা লেআউটের উপর আরো নিয়ন্ত্রণ পেতে বিশেষ মান ডিভাইস-প্রস্থে প্রস্থ সেট করুন।
ডিফল্টরূপে, ওয়েবভিউ একটি ডেস্কটপ ভিউপোর্টে ডিফল্ট করার পরিবর্তে ভিউপোর্টটিকে ডিভাইস-প্রস্থে সেট করে। যাইহোক, নির্ভরযোগ্য এবং নিয়ন্ত্রিত আচরণের জন্য, ভিউপোর্ট মেটা ট্যাগ অন্তর্ভুক্ত করা ভাল অভ্যাস।
ডেস্কটপ সাইটগুলি প্রদর্শন করুন
কিছু ক্ষেত্রে, আপনাকে এমন সামগ্রী প্রদর্শন করতে হতে পারে যা মোবাইল ডিভাইসের জন্য ডিজাইন করা হয়নি। উদাহরণস্বরূপ, আপনি এমন সামগ্রী প্রদর্শন করতে পারেন যা আপনি নিয়ন্ত্রণ করেন না। এই ক্ষেত্রে, আপনি ওয়েবভিউকে একটি ডেস্কটপ-আকারের ভিউপোর্ট ব্যবহার করতে বাধ্য করতে পারেন:
যদি এই পদ্ধতিগুলি সেট করা না থাকে এবং কোনও ভিউপোর্ট নির্দিষ্ট করা না থাকে, তাহলে WebView বিষয়বস্তুর আকারের উপর ভিত্তি করে ভিউপোর্ট প্রস্থ সেট করার চেষ্টা করে।
উপরন্তু, আপনি লেআউট অ্যালগরিদম TEXT_AUTOSIZING
ব্যবহার করতে চাইতে পারেন, যা মোবাইল ডিভাইসে এটিকে আরও পঠনযোগ্য করতে ফন্টের আকার বাড়ায়৷ setLayoutAlgorithm দেখুন।
প্রতিক্রিয়াশীল নকশা ব্যবহার করুন
প্রতিক্রিয়াশীল ডিজাইন হল একটি ইন্টারফেস ডিজাইন করার একটি পদ্ধতি যা পর্দার আকারের উপর ভিত্তি করে পরিবর্তিত হয়।
প্রতিক্রিয়াশীল নকশা বাস্তবায়নের অনেক উপায় আছে। সবচেয়ে সাধারণ একটি হল @media
queries , যা একটি ডিভাইসের বৈশিষ্ট্যের উপর ভিত্তি করে উপাদানগুলিতে CSS প্রয়োগ করে।
উদাহরণস্বরূপ, ধরুন আপনি একটি উল্লম্ব বিন্যাস থেকে অভিযোজনের উপর ভিত্তি করে একটি অনুভূমিক বিন্যাসে যেতে চেয়েছিলেন। প্রতিকৃতিতে ডিফল্ট হিসাবে CSS বৈশিষ্ট্য সেট করুন:
.page-container {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
একটি অনুভূমিক বিন্যাসে স্যুইচ করতে, অভিযোজনের উপর ভিত্তি করে ফ্লেক্স-দিক বৈশিষ্ট্য পরিবর্তন করুন:
@media screen and (orientation: landscape) {
.page-container.notification-opened {
-webkit-box-orient: horizontal;
flex-direction: row;
}
.page-container.notification-opened > .notification-arrow {
margin-right: 20px;
}
}
আপনি পর্দার প্রস্থের উপর ভিত্তি করে লেআউট পরিবর্তন করতে পারেন।
উদাহরণস্বরূপ, ফিজিক্যাল স্ক্রীনের আকার বড় হওয়ার সাথে সাথে বোতামের প্রস্থের আকার 100% থেকে ছোট কিছুতে সামঞ্জস্য করা।
button {
display: block;
width: 100%;
...
}
@media screen and (min-width: 500px) {
button {
width: 60%;
}
}
@media screen and (min-width: 750px) {
button {
width: 40%;
max-width: 400px;
}
}
এগুলি ছোটখাটো পরিবর্তন, কিন্তু আপনার UI এর উপর নির্ভর করে, মিডিয়া কোয়েরিগুলি আপনাকে একই HTML বজায় রেখে আপনার অ্যাপ্লিকেশনের চেহারাতে অনেক বড় পরিবর্তন করতে সাহায্য করতে পারে।
খাস্তা এবং পরিষ্কার ছবি
বিভিন্ন ধরণের পর্দার আকার এবং ঘনত্বও চিত্রের জন্য চ্যালেঞ্জ উপস্থাপন করে। ছোট ছবিগুলির জন্য কম মেমরির প্রয়োজন হয় এবং দ্রুত লোড হয়, তবে আপনি সেগুলিকে স্কেল করলে ঝাপসা হয়ে যায়৷
যেকোন স্ক্রিনে আপনার ছবিগুলো ক্রিস্প এবং পরিষ্কার দেখায় তা নিশ্চিত করার জন্য এখানে কয়েকটি টিপস এবং কৌশল রয়েছে:
- স্কেলযোগ্য প্রভাবের জন্য CSS ব্যবহার করুন।
- ভেক্টর গ্রাফিক্স ব্যবহার করুন।
- উচ্চ-রেজোলিউশন ছবি প্রদান করুন.
স্কেলযোগ্য প্রভাবের জন্য CSS ব্যবহার করুন
ছবির পরিবর্তে যখনই পারেন CSS ব্যবহার করুন। এটা সম্ভব যে CSS বৈশিষ্ট্যের কিছু সংমিশ্রণ রেন্ডার করা ব্যয়বহুল হতে পারে। আপনি যে নির্দিষ্ট সংমিশ্রণগুলি ব্যবহার করছেন তা সর্বদা পরীক্ষা করুন।
ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) সম্পর্কে আরও জানুন, যা ব্যবহারকারীর প্রথম পৃষ্ঠায় নেভিগেট করার সময় থেকে পৃষ্ঠার সামগ্রীর কোনো অংশ স্ক্রিনে রেন্ডার করা পর্যন্ত সময় পরিমাপ করে৷ "সামগ্রী" টেক্সট, ছবি (ব্যাকগ্রাউন্ডের ছবি সহ), <svg>
উপাদান এবং অ-সাদা <canvas>
উপাদানকে বোঝায়।
ভেক্টর গ্রাফিক্স ব্যবহার করুন
স্কেলযোগ্য ভেক্টর গ্রাফিক্স (SVGs) একটি মাপযোগ্য চিত্র প্রদানের একটি দুর্দান্ত উপায়। ভেক্টর গ্রাফিক্সের সাথে মানানসই ছবিগুলির জন্য, SVG খুব ছোট ফাইলের আকার সহ উচ্চ-মানের ছবি সরবরাহ করে।
উচ্চ-রেজোলিউশন ছবি প্রদান করুন
একটি উচ্চ-ডিপিআই ডিভাইসের জন্য উপযুক্ত একটি ফটো ব্যবহার করুন এবং CSS ব্যবহার করে চিত্রটি স্কেল করুন। এইভাবে, ইমেজটি ডিভাইস জুড়ে একটি উচ্চ মানের রেন্ডার করতে পারে। আপনি যদি ইমেজ তৈরি করার সময় উচ্চ কম্প্রেশন (নিম্ন মানের সেটিং) ব্যবহার করেন, তাহলে আপনি একটি যুক্তিসঙ্গত ফাইল আকারের সাথে ভাল ভিজ্যুয়াল ফলাফল অর্জন করতে সক্ষম হতে পারেন।
এই পদ্ধতির কয়েকটি সম্ভাব্য ডাউনসাইড রয়েছে: উচ্চ-সংকুচিত চিত্রগুলি কিছু ভিজ্যুয়াল আর্টিফ্যাক্ট দেখাতে পারে, তাই আপনি কোন স্তরের কম্প্রেশন গ্রহণযোগ্য বলে মনে করেন তা নির্ধারণ করতে আপনাকে পরীক্ষা করতে হবে। এবং CSS-এ চিত্রের আকার পরিবর্তন করা একটি ব্যয়বহুল অপারেশন হতে পারে।
যদি উচ্চ সংকোচন আপনার প্রয়োজনের জন্য উপযুক্ত না হয়, WebP বিন্যাস চেষ্টা করুন, যা তুলনামূলকভাবে ছোট ফাইল আকারের সাথে একটি উচ্চ মানের চিত্র দেয়। Android এর ভার্সন যেখানে WebP সমর্থিত নয় সেখানে একটি ফলব্যাক প্রদান করতে ভুলবেন না।
সূক্ষ্ম শস্য নিয়ন্ত্রণ
অনেক ক্ষেত্রে, আপনি সব ডিভাইসের জন্য একটি ছবি ব্যবহার করতে পারবেন না। এই ক্ষেত্রে, আপনি পর্দার আকার এবং ঘনত্বের উপর ভিত্তি করে বিভিন্ন চিত্র নির্বাচন করতে পারেন। পর্দার আকার এবং ঘনত্ব দ্বারা পটভূমি ছবি নির্বাচন করতে মিডিয়া প্রশ্নগুলি ব্যবহার করুন৷
ছবিগুলি কীভাবে লোড হয় তা নিয়ন্ত্রণ করতে আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন, তবে এটি জটিলতা যোগ করে।
মিডিয়া প্রশ্ন এবং পর্দার ঘনত্ব
পর্দার ঘনত্বের উপর ভিত্তি করে একটি চিত্র নির্বাচন করতে, আপনাকে আপনার মিডিয়া ক্যোয়ারীতে dpi
বা dppx
ইউনিট ব্যবহার করতে হবে। dpi
ইউনিট প্রতি CSS ইঞ্চি বিন্দু প্রতিনিধিত্ব করে, এবং dppx
প্রতি CSS পিক্সেল বিন্দু প্রতিনিধিত্ব করে।
নিম্নলিখিত টেবিলে, আপনি dpi
এবং dppx
মধ্যে সম্পর্ক দেখতে পারেন।
ডিভাইস পিক্সেল অনুপাত | সাধারণ পর্দার ঘনত্ব | বিন্দু প্রতি CSS ইঞ্চি ( dpi ) | সিএসএস পিক্সেল প্রতি বিন্দু ( dppx ) |
---|---|---|---|
1x | এমডিপিআই | 96 dpi | 1 dppx |
1.5x | এইচডিপিআই | 144 dpi | 1.5 dppx |
2 | XHDPI | 192 dpi | 2 dppx |
সাধারণীকৃত স্ক্রীনের ঘনত্বের বালতিগুলি Android দ্বারা সংজ্ঞায়িত করা হয় এবং স্ক্রীনের ঘনত্ব প্রকাশ করার জন্য অন্যান্য স্থানে ব্যবহার করা হয় (উদাহরণস্বরূপ, https://screensiz.es )।
পটভূমি ছবি
উপাদানগুলিতে পটভূমি চিত্রগুলি বরাদ্দ করতে আপনি মিডিয়া প্রশ্নগুলি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, যদি আপনার 1.0 পিক্সেল অনুপাতের ডিভাইসে 256px x 256px আকারের একটি লোগো ছবি থাকে, তাহলে আপনি নিম্নলিখিত CSS নিয়মগুলি ব্যবহার করতে পারেন:
.welcome-header > h1 {
flex: 1;
width: 100%;
max-height: 256px;
max-width: 256px;
background-image: url('../images/html5_256x256.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
1.5 (hdpi) এবং 2.0 (xhdpi) এর ডিভাইস পিক্সেল অনুপাত সহ ডিভাইসগুলিতে একটি বড় চিত্রের জন্য এটিকে অদলবদল করতে, আপনি নিম্নলিখিত নিয়মগুলি যোগ করতে পারেন:
@media screen and (min-resolution: 1.5dppx) {
.welcome-header > h1{
background-image: url('../images/html5_384x384.png');
}
}
@media screen and (min-resolution: 2dppx) {
.welcome-header > h1{
background-image: url('../images/html5_512x512.png');
}
}
তারপরে আপনি এই কৌশলটিকে অন্যান্য মিডিয়া প্রশ্নের সাথে একত্রিত করতে পারেন, যেমন min-width
, যেটি আপনি বিভিন্ন ফর্ম ফ্যাক্টরের জন্য অ্যাকাউন্ট করার জন্য দরকারী।
@media screen and (min-resolution: 2dppx) {
.welcome-header > h1{
background-image: url('../images/html5_512x512.png');
}
}
@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
.welcome-header > h1{
background-image: url('../images/html5_1024x1024.png');
max-height: 512px;
max-width: 512px;
}
}
আপনি লক্ষ্য করতে পারেন যে 1024x1024px এর একটি চিত্র সহ 2 ddpx
রেজোলিউশনের জন্য max-height
এবং max-width
512px সেট করা হয়েছে। কারণ একটি CSS "পিক্সেল" আসলে ডিভাইস পিক্সেল অনুপাত (512px * 2 = 1024px) বিবেচনা করে।
<img/>
সম্পর্কে কি?
ওয়েব আজকের এই জন্য একটি সমাধান নেই. কিছু প্রস্তাব আছে, কিন্তু সেগুলি বর্তমান ব্রাউজারে বা WebView-এ উপলব্ধ নেই৷
ইতিমধ্যে, আপনি যদি জাভাস্ক্রিপ্টে আপনার DOM তৈরি করেন, আপনি একটি চিন্তাশীল ডিরেক্টরি কাঠামোতে একাধিক চিত্র সংস্থান তৈরি করতে পারেন:
images/
mdpi/
imagename.png
hdpi/
imagename.png
xhdpi/
imagename.png
তারপরে সবচেয়ে উপযুক্ত চিত্রটি চেষ্টা করতে এবং টানতে পিক্সেল অনুপাত ব্যবহার করুন:
function getDensityDirectoryName() {
if(!window.devicePixelRatio) {
return 'mdpi';
}
if(window.devicePixelRatio > 1.5) {
return 'xhdpi';
} else if(window.devicePixelRatio > 1.0) {
return 'hdpi';
}
return 'mdpi';
}
বিকল্পভাবে, আপনি ছবির জন্য আপেক্ষিক URL গুলি সংজ্ঞায়িত করতে পৃষ্ঠার ভিত্তি URL পরিবর্তন করতে পারেন৷
<!doctype html>
<html class="no-js">
<head>
<script>
function getDensityDirectoryName() {
if(!window.devicePixelRatio) {
return 'mdpi';
}
if(window.devicePixelRatio > 1.5) {
return 'xhdpi';
} else if(window.devicePixelRatio > 1.0) {
return 'hdpi';
}
return 'mdpi';
}
var baseUrl =
'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
document.write('<base href="'+baseUrl+'">');
</script>
...
</head>
<body>
...
</body>
</html>
এই পদ্ধতিটি পৃষ্ঠা লোডকে অবরুদ্ধ করে এবং সমস্ত সংস্থান যেমন চিত্র, স্ক্রিপ্ট এবং CSS ফাইলগুলির জন্য পরম পথ ব্যবহার করতে বাধ্য করে, কারণ বেস ইউআরএল একটি ঘনত্ব-নির্দিষ্ট ডিরেক্টরি নির্দেশ করে।