সিএসএস রেস্পন্সিভ ভিউপোর্ট - Css Responsive Viewport


ভিউপোর্ট কি?

ওয়েব পেজের যে অংসটুকু ব্যবহারকারী বা user এর ডিভাইসে প্রদর্শিত হয় তাকেই viewport বলে। রেস্পন্সিভ ওয়েব ডিজাইন করতে ভিউপোর্ট হল সর্ব প্রথম বিবেচ্ছ বিষয়।

বিভিন্ন ডিভাইসের ভিউপোর্ট বিভিন্ন রকম হয়। যেমন মোবাইল বা স্মার্টফোন এর ভিউপোর্ট এক রকম হয়, আবার ট্যাবলেট এর ভিউপোর্ট অন্য রকম হয়।

ইন্টারনেটে প্রথম দিকের সময়ে ওয়েব পেজ গুলো কেবল মাত্র কম্পিউারের জন্যই ডিজাইন করা হত। কারন তখন ইন্টারনেট কেবল কম্পিউটারেই ব্যবহার হত। কিন্তু কালক্রমে ট্যাবলেট এবং মোবাইলে ইন্টারনেট ব্যবহার শুরু হয়। তখন কম্পিউটারের জন্য তৈরি ওয়েব পেজ গুলো মোবাইল ভিউপোর্টের জন্য খুব বড় হয়। যা ইন্টারনেট এর ক্রমবিকাশে বাঁধার কারন হয়ে দাড়ায়। এই সমস্যা দূর করতে ঐ সকল ডিভাইসের ব্রাউজারগুলো ওয়েবপেজকে ছোট করে দেখাতো। কিন্তু এটা কোন পুর্ণনাঙ্গ সমাধাণ ছিল না, কারন এর ফলে কন্টেন্ট গুলোও মোবাইল বা স্মার্টফোন এর স্ক্রীনে ছোট হয়ে প্রদর্শিত হত।


ভিউপোর্ট নির্ধারণ করা

এইচটিএমএল এর 5.0 সংস্করণে <meya> ট্যাগ ব্যবহার করে ওয়েব পেজ অর্থাৎ এইচটিএমএল ডকুমেন্ট এর ভিউপোর্ট নির্ধারণ করা যায়। ওয়েব পেজে <meya> ট্যাগ ব্যবহার করে ভিউপোর্ট নির্ধারন করার জন্য viewport এলিমেন্টকে নিচের মত করে ব্যবহার করতে হবে।

উদাহরণ

<meta name="viewport" content="width=device-width, initial-scale=1.0">

কোড এডিটর


এইচটিএমএল এর <meya> ট্যাগ, কোন ওয়েব পেজ কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে।

width=device-width এই অংশটি ভিন্ন ভিন্ন ডিভাইসের প্রস্থ অর্থাৎ width অনুযায়ী ওয়েব পেজের প্রস্থ বা width নির্ধারণ করে।

initial-scale=1.0 এই অংশটি ওয়েব ব্রাউজার, কোন ওয়েব পেজ লোড করার সময় পেজের প্রাথমিক জুম-লেভেল নির্ধারণ করে।

নিচে একটি ওয়েব পেজের ভিউপোর্ট মেটাট্যাগ সহ এবং ভিউপোর্ট মেটাট্যাগ ছাড়া দুইটিরই উদাহরণ দেওয়া হল -

নোট - যদি ব্রাউজিং এর জন্য কোন ফোন বা ট্যাবলেট ব্যবহার করা হয়, তাহলে দুইটি লিঙ্কে ক্লিক করে পার্থক্য দেখতে পারবেন।


ভিউপোর্ট অনুযায়ী কন্টেন্ট নির্ধারণ

ব্যবহারকারী বা user ডেস্কটপ এবং মোবাইল উভয় প্রকার ডিভাইসেই উল্লম্ব অর্থাৎ vertically স্ক্রল করে - অনুভূমিক বা horizontally নয়! তাই, ওয়েব পেজ ব্রাউজ করতে যদি ব্যবহারকারী বা user কে অনুভূমিক বা horizontally স্ক্রল করতে হয় বা জুম আউট করতে হয়, তাহলে ব্যবহারকারী বা user এর জন্য ওয়েব সাইটটি একটি বিরক্তিকর ওয়েব সাইট হয়ে উঠে যার ফলশ্রুতিতে একটি বাজে user exprience তৈরি করে।

কন্টেন্টকে সকল ডিভাইসে সুন্দরভাবে দেখানোর জন্য আরো তিনটি পদ্ধতি মেনে চলতে পারি। এগুলো হল নিম্নরুপ -