HTML Viewport meta tag রেসপন্সিভ ওয়েবসাইট তৈরি করতে ব্যবহৃত হয়। যাতে ওয়েব পেজ ভিউপোর্ট অনুযায়ী তার চওড়া অ্যাডজাস্ট করতে পারে।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
viewport meta tag-এর অ্যাট্রিবিউট
| অ্যাট্রিবিউট | ব্যাখ্যা |
|---|---|
| width | এটি ডিভাইসের ভার্চুয়াল ভিউপোর্ট চওড়া স্পেসিফাই করে। |
| height | এটি ডিভাইসের ভার্চুয়াল ভিউপোর্ট উচ্চতা স্পেসিফাই করে। |
| initial-scale | এটি পেজ প্রথম ভিজিট করার সময় জুম লেভেল স্পেসিফাই করে। |
| minimum-scale | এটি ন্যূনতম জুম লেভেল স্পেসিফাই করে য-PCR upor ইউজার পেজটি জুম করতে পারে। |
| maximum-scale | এটি সর্বোচ্চ জুম লেভেল স্পেসিফাই করে য-PCR upor ইউজার পেজটি জুম করতে পারে। |
| user-scalable | এটি স্পেসিফাই করে ইউজার জুম ইন বা আউট করতে পারবে কিনা। |
উদাহরণ
HTML viewport meta tag-এর একটি উদাহরণ দেখা যাক:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; padding: 20px; } </style> </head> <body> <h1>HTML Viewport meta tag ডেমো</h1> <p> This is a paragraph with some dummy text. This is a paragraph with some dummy text. This is a paragraph with some dummy text. This is a paragraph with some dummy text. </p> <p> This is another paragraph with some dummy text. This is another paragraph with some dummy text. This is another paragraph with some dummy text. This is another paragraph with some dummy text. This is another paragraph with some dummy text. This is another paragraph with some dummy text. </p> </body> </html>আউটপুট
এখন ব্রাউজার উইন্ডো রিসাইজ করার চেষ্টা করুন নিরীক্ষণ করার জন্য কীভাবে পেজ ছোট ডিভাইসে প্রদর্শিত হয়।
