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



ভিউপোর্ট কি?

এক কথায় ভিউপোর্ট হল ইউজার ডিভাইসে ওয়েব পেজের দৃশ্যমান অংশ।

ভিউপোর্ট বিভিন্ন ডিভাইসের জন বিভিন্ন রকম হয়, তাই স্বাভাবিকভাবেই মোবাইলের ভিউপোর্ট কম্পিউটারের ভিউপোর্টের চেয়ে ছোট হয়।

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


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

html 5 এ ওয়েব ডিজাইনারদের জন্য <meta> ট্যাগের মাধ্যমে ভিউপোর্ট নির্ধারণ করার একটি পদ্ধতির প্রচলন করা হয়েছে। ওয়েব পেজে <meta> ব্যবহার করে ভিউপোর্ট নির্ধারন করার জন্য viewport এলিমেন্টটিকে নিচের মত করে ব্যবহার করতে হবে।

উদাহরণ

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


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

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

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

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

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


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

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

দীর্ঘ প্রস্থের এলিমেন্ট ব্যবহার না করা - অনেক বেশি প্রস্থের কোন এলিমেন্ট ব্যবহার করা ঠিক না। কোন এলিমেন্টের প্রস্থ যদি ভিউপোর্টের প্রস্থের চেয়ে বেশি হয় তাহলে হরিজন্টাল স্ক্রলবার তৈরি হয়। তাই এলিমেন্টের প্রস্থ ভিউপোর্ট অনুযায়ী নির্ধারণ করতে হবে।

ভিন্ন ভিন্ন ভিউপোর্ট - কন্টেন্টকে যেকোন একটি ভিউপোর্টের জন্য সুন্দরভাবে তৈরি করলেই হবে না, কারণ ভিন্ন ভিন্ন ভিউপোর্টে সেগুলো ভিন্ন ধরনের ফলাফল দেখাবে।

মিডিয়া কুয়েরি - সঠিক ভাবে মিডিয়া কুয়েরির ব্যবহার করতে হবে। সকল ডিভাইসে কন্টেন্টকে সুন্দরভাবে প্রদর্শনের সবচেয়ে ভালো পদ্ধতি হলো মিডিয়া কুয়েরি ব্যবহার করা।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.