রেসপনসিভ ওয়েব ডিজাইন - ভিউপোর্ট » সেই কোডার রেসপনসিভ ওয়েব ডিজাইন - ভিউপোর্ট » সেই কোডার
রেসপনসিভ ওয়েব ডিজাইন - ভিউপোর্ট
Viewport বলতে কি বোঝায়?
ব্যবহারকারী ওয়েবপেজের যতটুকু অংশ দেখতে পায়, সেটিকে এককথায় ভিউপোর্ট বলে। বিভিন্ন ডিভাইস ও ব্রাউজার ভেদে ভিউপোর্টের আকার আকৃতি পরিবর্তিত হয়।
ট্যাবলেট, মোবাইল ইত্যাদি ডিভাইস তৈরি বা আবিষ্কৃত হওয়ার আগে সবধরণের ওয়েবপেজকে সাধারণত কম্পিউটারের জন্য তৈরি করা হতো। আর এগুলো ছিলো স্ট্যাটিক ওয়েব পেজ এবং নির্দিষ্ট আকার ও আকৃতির।
এরপর যখন বিভিন্ন আকার ও আকৃৃতির ডিভাইস বাজারে আসলো, তখন আগের ওয়েবপেজগুলোকে সঠিকভাবে এসব ডিভাইসে ব্রাউজ করা যেতো না। কাজেই একটা উৎকৃষ্ট সমাধানের প্রয়োজন ছিলো।
আর এই সমাধানটি হলো রেসপনসিভ ওয়েবপেজ ডিজাইন। কিন্তু তখনও আমরা (ডিজাইনারা) জানিনা ওয়েবপেজ কোন সাইজের ডিভাইসে প্রদর্শিত হচ্ছে। যদিও জাভাস্ক্রিপ্ট ব্যবহার করে এটি জানা যায়, কিন্তু বিপুল সংখ্যক সাইজের ডিভাইসের জন্য আলাদা আলাদাভাবে কোড লিখা খুবই কঠিন কাজ। ঠিক এই কারণে ভিউপোর্টের ব্যবহার এলো।
Viewport -এর মান নির্ধারণ
HTML5 -এ viewport নিয়ন্ত্রণ করার জন্য নতুন উপায় সংযোজন করা হয়।
সব ওয়েবপেজে এখন থেকে <meta> viewport element যুক্ত করতে হবে:
<meta> viewport element এর মাধ্যমে ব্রাউজারে ডাইমেনসন ও স্কেলিং নিয়ন্ত্রণ করার জন্য নির্দেশনা দেওয়া হয়।
width=device-width দ্বারা ডিভাইস স্ক্রিণের পুরো প্রস্থকে ভিউপোর্ট প্রস্থ হিসেবে বিবেচনা করার নির্দেশনা দেওয়া হয়।
initial-scale=1.0 দ্বারা ব্রাউজারের প্রারম্ভিক জুম লেভেল নির্ধারণ করা হয়।
নিচে viewport meta tag সহ এবং viewport meta tag ছাড়া একটি ওয়েবপেজকে উপস্থাপণ করা হলো:
টিপস: যদি ফোন বা ট্যাবলেট থেকে ওয়েবপেজটি ভিজিট করছেন তবে লিংক দুটিতে ক্লিক করে তাদের পার্থক্য দেখতে পারেন।
viewport meta tag ছাড়া
viewport meta tag সহ
Viewport এর সাথে কন্টেন্ট এর সম্পর্ক
ব্যবহারকারীরা সাধারণত ওয়েবপেজকে উল্লম্বভাবে স্ক্রল করে থাকে। আনুভূমিকভাবে নয়। কাজেই যদি পেজের কন্টেন্ট ভিউপোর্টের প্রস্থের সমান বা কম প্রস্থবিশিষ্ট হয়, তবে ব্যবহারকারী খুব সহজে পেজটিকে ব্রাউজ করতে পারবে।
কিছু অতিরিক্ত নিয়ম:
১। নির্দিষ্ট প্রস্থ বিশিষ্ট অধিক প্রস্থের ইলামেন্ট ব্যবহার করবেন না। এতে ইলামেন্টর প্রস্থ ভিউপোর্টের প্রস্থের চাইতে বেশি হয়ে যেতে পারে, যার ফলে কন্টেন্টকে আনুভূমিকভাবে স্ক্রল করার প্রয়োজন হতে পারে।
২। শুধুমাত্র কোনো নির্দিষ্ট ডিভাইসের ভিউপোর্টের কথা বিবেচনা করে পেজ ডিজাইন করবেন না। কারণ ডিভাইসভেদে ভিউপোর্ট বিভিন্ন মান বিশিষ্ট হয়।
৩। CSS media query ব্যবহার করে বিভিন্ন ভিউপোর্টের জন্য ইলামেন্টের অবস্থান এমনভাবে নির্ধারণ করতে হবে, যাতে পেজটি সব ভিউপোর্টে সঠিকভাবে উপস্থাপিত হয়।