রেসপনসিভ ওয়েবসাইট ডিজাইন - ভিউপট

কী ভিউপোর্ট?

ভিউপোর্ট (viewport) হলো ব্যবহারকারীকে ওয়েবসাইটের মধ্যে দেখা যায় এলাকা

ভিউপোর্ট ডিভাইসের উপর নির্ভর করে, মোবাইল ফোনে তা কম্পিউটার স্ক্রিনের তুলনায় ছোট

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

এবং, যখন আমরা প্যাডলেট এবং মোবাইলের ওয়েব ব্রাউজিং শুরু করে, স্থির মাপের ওয়েবসাইটটি খুবই বড়, যাতে ভিউপোর্টের সাথে মানানসই হতে পারে না। এই সমস্যা সমাধান করার জন্য, এই ডিভাইসগুলিতে ব্রাউজারটি সমগ্র ওয়েবসাইটকে অনুপাতিকভাবে ক্ষুদ্রীকরণ করে, যাতে স্ক্রিনের মাপের সাথে মানানসই হতে পারে

এটা পূর্ণাঙ্গ নয়! এটা একটি ক্ষুদ্র সংশোধন

ভিউপোর্ট সেট করতে পারে

HTML5 একটি পদ্ধতি উপস্থাপন করেছে, যার মাধ্যমে Web ডিজাইনাররা <meta> ট্যাগটি ভিউপোর্টকে নিয়ন্ত্রণ করতে দিয়েছেন

আপনি সকল ওয়েবসাইটে নিচের <meta> ভিউপোর্ট ইলেকট্রন

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

এটা ব্রাউজারকে পৃষ্ঠার মাপ এবং সমস্কার নির্ধারণ করার নির্দেশ দেয়

width=device-width অংশগুলি পৃষ্ঠার প্রস্থত্বকে ডিভাইসের স্ক্রিন প্রস্থত্বের অনুসারে সমায়

যখন ব্রাউজার প্রথমবার পৃষ্ঠা লোড করেinitial-scale=1.0 অংশগুলির প্রাথমিক সমস্কার সমায়

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

সুঝানা:আপনি যদি মোবাইল কিংবা প্যাডলেট কম্পিউটারে এই পৃষ্ঠা দেখতে চান, তবে নিচের দুটি লিঙ্কটি ক্লিক করে ভিন্নতা দেখতে পারেন。



ভিউপোর্ট মেটা ট্যাগ নেই


ভিউপোর্ট মেটা ট্যাগ সহ

বিষয়গুলিকে ভিউপোর্টের মাপের সাথে সাজানো

ব্যবহারকারীরা টাইপ কম্পিউটার এবং মোবাইল ডিভাইসের ওয়েবসাইটকে উঁচুতে রোল করে দেখে, না সমস্ত পাশে রোল করে দেখে!

তাই, যদি বাধ্যতামূলকভাবে ব্যবহারকারীকে সমগ্র ওয়েবসাইট দেখার জন্য আড়াইক্রমণ বা ক্ষুদ্রীকরণ করতে হয়, তবে এটা ব্যবহারকারীকে খারাপ অভিজ্ঞতা দিতে পারে。

যেসব অতিরিক্ত নিয়ম অনুসরণ করতে হবে:

1. 请勿使用较大的固定宽度元素 - 例如，如果图像的宽度大于视口的宽度，则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。

2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大，因此内容不应依赖于特定的视口宽度来呈现良好的效果。

3. CSS মিডিয়া কোয়াইয়ার ব্যবহার করে ছোট ও বড় স্ক্রিনের জন্য ভিন্ন শৈলী আপনার করুন - পাতা ইলেকট্রনসংবহনকারীর বড় কালি উপস্থাপনা করা হলে, সেটি ছোট ডিভাইসের ভিউপটের জন্য খুব বড় হবে।এর বদলে, অপেক্ষাকৃত সম্পূর্ণ পট ব্যবহার করুন, যেমন width: 100%।আরও, বড় কালি অবস্থান ব্যবহার করার সময় সতর্ক হয়ে থাকুন, যার ফলে এই ইলেকট্রনসংবহনকারীটি ছোট ডিভাইসের ভিউপট থেকে বাইরে যাবে。