<meta name="viewport" content="width=device-width, initial-scale=1">
এই <meta> ট্যাগটি ওয়েব পেজের ভিউপোর্ট সেটিংস নিয়ন্ত্রণ করতে ব্যবহৃত হয়, বিশেষত মোবাইল ডিভাইসগুলির জন্য। এখানে এই ট্যাগ এবং এর অ্যাট্রিবিউটগুলোর বিস্তারিত ব্যাখ্যা দেওয়া হলো একটি বাস্তব জীবনের উদাহরণ সহ।
মেটা ট্যাগের ব্যাখ্যা:
<meta name="viewport" content="width=device-width, initial-scale=1">
-
name="viewport": এটি স্পষ্ট করে যে এই ট্যাগটি ভিউপোর্ট নিয়ন্ত্রণ করছে, যা হল সেই অংশ যেখানে ওয়েব পেজের কন্টেন্ট দেখানো হয়। -
content="width=device-width": এটি ভিউপোর্টের প্রস্থকে ডিভাইসের প্রস্থ এর সমান করে দেয়। এর মানে হল যে ওয়েব পেজের লেআউট ডিভাইসের স্ক্রীনের প্রস্থ অনুসারে নিজেকে মানিয়ে নেবে। এটি ছোট স্ক্রীনে (যেমন মোবাইল ফোন) কন্টেন্টকে অতিরিক্ত স্কেল না হতে দেয়, ফলে ওয়েব পেজটি আরও পড়তে সহজ হয়ে যায় এবং অনুভূতভাবে অনুভূতি হয়। -
initial-scale=1: এটি পেজ লোড হওয়ার সময় প্রাথমিক জুম লেভেল নির্ধারণ করে।1মানে হল পেজটি প্রথমে জুম ইন বা জুম আউট হবে না; এটি তার প্রাকৃতিক সাইজে প্রদর্শিত হবে।
বাস্তব জীবনের উদাহরণ:
ধরা যাক আপনি একটি মোবাইল অ্যাপ এর জন্য ওয়েব পেজ ডিজাইন করছেন। মেটা ভিউপোর্ট ট্যাগ ছাড়া, পেজটি ফোনে খুব ছোট বা খুব জুমড ইন দেখতে পারে, কারণ ডেস্কটপ স্টাইলের ওয়েব পেজগুলি বড় স্ক্রীনের জন্য ডিজাইন করা হয়। কন্টেন্টটি খুব ছোট এবং পড়তে কঠিন হতে পারে, অথবা এটি অনুভূতভাবে অনুভূত হতে পারে, যার ফলে আপনি হয়তো অনুভব করবেন।
মেটা ট্যাগ ছাড়া:
যদি ট্যাগটি অনুপস্থিত থাকে, ওয়েব পেজটি সঠিকভাবে স্কেল হবে না, এবং ব্রাউজার হয়তো পুরো ডেস্কটপ সাইজের পেজটি দেখাবে, যা মোবাইল ডিভাইসে খুব ছোট দেখাবে, যেমন:
- ফোনে, ব্রাউজার পুরো ডেস্কটপ সাইজের পেজটি ফোনের স্ক্রীন প্রস্থে ফিট করার চেষ্টা করবে। এটি সম্ভবত পেজটি দেখতে জুম ইন এবং হরিজন্টাল স্ক্রোলিং প্রয়োজন করবে, যা ব্যবহারকারীদের জন্য অস্বস্তিকর হতে পারে।
মেটা ট্যাগ সহ:
মেটা ভিউপোর্ট ট্যাগ অন্তর্ভুক্ত থাকলে, পেজটি স্বয়ংক্রিয়ভাবে ফোনের স্ক্রীনের প্রস্থে মানিয়ে নেবে, যেমন:
-
ফোনে, পেজটি ফোনের স্ক্রীনের আকার অনুযায়ী লেআউটটি মানিয়ে নিবে, কোনও জুম ইন বা হরিজন্টাল স্ক্রোলিং ছাড়াই।
-
টেক্সট, চিত্র এবং বাটনগুলি ছোট স্ক্রীনের জন্য যথাযথভাবে স্কেল হবে, ফলে কন্টেন্টটি পড়তে এবং নেভিগেট করতে সহজ হবে।
বাস্তব জীবনের তুলনা:
ধরা যাক আপনি একটি বই পড়ছেন। যদি বইটি বড় পৃষ্ঠার জন্য ডিজাইন করা হয় (যেমন একটি ম্যাগাজিন), তবে এটি ফোন স্ক্রীনে দেখলে খুব ছোট বা কঠিন হয়ে পড়তে পারে। কিন্তু যদি বইটি আপনার ফোনের স্ক্রীনের আকার অনুযায়ী পৃষ্ঠাগুলি সামঞ্জস্য করে, তবে এটি আরও সহজ হয়ে যায় পড়তে এবং বইটিকে জুম ইন বা চারপাশে নাড়িয়ে পড়তে।
সারাংশ:
<meta> ট্যাগটি নিশ্চিত করে যে আপনার ওয়েব পেজটি বিভিন্ন ডিভাইসে সঠিকভাবে স্কেল হবে, বিশেষ করে মোবাইল ফোনে, ডিভাইসের প্রস্থ অনুযায়ী পেজটির প্রস্থ সেট করে এবং প্রথমবার লোড হলে জুম লেভেল ১ নিশ্চিত করে, যাতে পেজটি পড়তে এবং নেভিগেট করতে আরও সহজ হয় এবং ম্যানুয়াল জুমিং বা স্ক্রোলিং প্রয়োজন না হয়।