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