Articles
সিএসএস-এর পরিচিতি
ভিউপোর্ট এবং প্রতিক্রিয়াশীল ডিজাইন

ভিউপোর্ট এবং প্রতিক্রিয়াশীল ডিজাইন

এই নিবন্ধে ভিউপোর্ট এবং প্রতিক্রিয়াশীল ডিজাইন সম্পর্কে ব্যাখ্যা করা হয়েছে।

আপনি শিখবেন কীভাবে <meta> ট্যাগ ব্যবহার করে ভিউপোর্ট সেট করতে হয় এবং কেন এটি গুরুত্বপূর্ণ।

YouTube Video

প্রিভিউর জন্য HTML

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

HTML এ viewport সেট করার সম্পর্কে

viewport সেটিং ওয়েবপেজ প্রদর্শনকারী ডিভাইসের প্রদর্শন ক্ষেত্র (viewport) সম্পর্কিত তথ্য নিয়ন্ত্রণে ব্যবহৃত হয়। বিশেষ করে মোবাইল ডিভাইসে ওয়েব পৃষ্ঠাগুলির প্রদর্শন সামঞ্জস্য করার ক্ষেত্রে এটি একটি গুরুত্বপূর্ণ ভূমিকা পালন করে।

Viewport কী?

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

Viewport নির্দিষ্ট করা

Viewport নিয়ন্ত্রণের জন্য, HTML এ <meta> ট্যাগ ব্যবহার করে viewport সেটিংস কনফিগার করা হয়। এই সেটিংটি আপনাকে নির্ধারণ করতে দেয় কীভাবে পৃষ্ঠাটি বিভিন্ন ডিভাইসে প্রদর্শিত হবে।

মূল সিনট্যাক্স 

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

এই কোডটি viewport এর প্রস্থ ডিভাইসের প্রস্থের সাথে মেলে এবং পৃষ্ঠার প্রাথমিক প্রদর্শন স্কেল (জুম স্তর) ১.০ (১০০% প্রদর্শন) তে সেট করে।

viewport-এর প্রধান বৈশিষ্ট্যসমূহ

viewport এর content বৈশিষ্ট্যের সাথে প্রধানত যে বৈশিষ্ট্যগুলি নির্দিষ্ট করা যায় সেগুলি হলো নিম্নলিখিত:।

  1. width

    • width এর জন্য viewport এর প্রস্থ নির্ধারণ করুন। device-width এ সেট করে, viewport ডিভাইসের শারীরিক প্রস্থ অনুযায়ী পিক্সেলে সামঞ্জস্য হয়।
    • উদাহরণ: width=device-width

  2. height

    • height জন্য viewport এর উচ্চতা নির্দিষ্ট করুন, যদিও সাধারণত কেবল প্রস্থ সেট করা হয় এবং উচ্চতা প্রায়শই নির্দিষ্ট করা হয় না। device-height এ সেট করার মাধ্যমে viewport ডিভাইসের শারীরিক উচ্চতার সাথে পিক্সেলে মিলে যায়।
    • উদাহরণ: height=device-height

  3. initial-scale

    • initial-scale-এর জন্য পৃষ্ঠার প্রাথমিক জুম স্তর নির্দিষ্ট করুন। 1.0 মানে হল ডিভাইসের ১০০% জুম স্তর।
    • উদাহরণ: initial-scale=1.0

  4. minimum-scale

    • minimum-scale এর জন্য ছোট করার ন্যূনতম স্কেল নির্ধারণ করুন। 0.5 সেট করে, আপনি সর্বাধিক ৫০% পর্যন্ত ছোট করতে পারবেন।
    • উদাহরণ: minimum-scale=0.5

  5. maximum-scale

    • maximum-scale এর জন্য বড় করার সর্বোচ্চ স্কেল নির্ধারণ করুন। 2.0 সেট করে, আপনি সর্বাধিক ২০০% পর্যন্ত বড় করতে পারবেন।
    • উদাহরণ: maximum-scale=2.0

  6. user-scalable

    • user-scalable এর জন্য ব্যবহারকারী পৃষ্ঠাটি জুম করতে পারবে কিনা তা নির্ধারণ করুন। yes বা no দিয়ে নির্ধারণ করুন।
    • উদাহরণ: user-scalable=no সেট করলে ব্যবহারকারীর জুমিং নিষ্ক্রিয় হয়ে যাবে।

সাধারণত ব্যবহৃত উদাহরণসমূহ।

  1. মানক রেসপনসিভ সেটিংস
1<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • এই সেটিংটি স্বয়ংক্রিয়ভাবে মোবাইল ডিভাইসের স্ক্রিন প্রস্থ অনুযায়ী পৃষ্ঠা সামঞ্জস্য করে এবং নিশ্চিত করে যে পৃষ্ঠা ১০০% জুম স্তরে দেখানো হবে। এটি রেসপনসিভ ডিজাইনের মৌলিক একটি সেটিং।
  1. জুম নিষ্ক্রিয় করুন
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • এই সেটিংটি ব্যবহারকারী কর্তৃক জুমিং নিষ্ক্রিয় করে। এটি ব্যবহৃত হয় যখন কোন নির্দিষ্ট ডিজাইনের জন্য জুমিং প্রয়োজন হয় না অথবা জুমিং অপারেশন ডিজাইনের ভেঙে যাওয়ার ঝুঁকি তৈরি করতে পারে।
  1. স্থির জুম স্তর এবং ভিউপোর্টের প্রস্থ
1<meta name="viewport" content="width=1024, initial-scale=1.0">
  • এই সেটিংটি ভিউপোর্টের প্রস্থ ১০২৪ পিক্সেলে স্থির করে এবং প্রাথমিক প্রদর্শনে জুম স্তরকে ১০০% এ নির্ধারণ করে। এটি ব্যবহৃত হয় যখন ডিভাইসের প্রস্থ নির্বিশেষে আপনি পৃষ্ঠার প্রস্থ স্থির রাখতে চান।

viewport এর ভূমিকা

viewport সেট করা প্রদর্শন অপ্টিমাইজ করার জন্য অপরিহার্য, বিশেষত মোবাইল ডিভাইসগুলির জন্য। ভিউপোর্ট সঠিকভাবে কনফিগার করার মাধ্যমে আপনি নিম্নলিখিত সমস্যাগুলি প্রতিরোধ করতে পারেনঃ।

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

সারসংক্ষেপ

  • viewport ওয়েবপেজ প্রদর্শনকারী ডিভাইসের প্রদর্শন ক্ষেত্র নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
  • এটি মূলত মোবাইল ডিভাইসে প্রদর্শনের জন্য ব্যবহৃত হয় এবং রেসপনসিভ ডিজাইনে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে।
  • width=device-width এবং initial-scale=1.0 এর মতো সেটিংস স্ট্যান্ডার্ড রেসপনসিভ ওয়েব ডিজাইনে সাধারণত ব্যবহৃত হয়।

viewport সঠিকভাবে সেট করলে মোবাইল ব্যবহারকারীদের জন্য একটি আরামদায়ক দেখার অভিজ্ঞতা প্রদান করতে পারে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

CSS এ রেস্পন্সিভ ডিজাইনের সংক্ষিপ্ত বিবরণ`@media` এবং প্রতিক্রিয়াশীল ডিজাইন