Articles
CSS का परिचय
व्ह्यूपोर्ट और रिस्पॉन्सिव डिज़ाइन

व्ह्यूपोर्ट और रिस्पॉन्सिव डिज़ाइन

इस लेख में व्ह्यूपोर्ट और रिस्पॉन्सिव डिज़ाइन को समझाया गया है।

आप सीखेंगे कि <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 में व्यूपोर्ट सेट करने के बारे में

व्यूपोर्ट सेटिंग का उपयोग उस डिवाइस के डिस्प्ले क्षेत्र (व्यूपोर्ट) की जानकारी को नियंत्रित करने के लिए किया जाता है जो वेबपेज प्रदर्शित कर रहा है। यह खासतौर पर मोबाइल डिवाइसों पर वेब पेजों के डिस्प्ले को समायोजित करने में महत्वपूर्ण भूमिका निभाता है।

व्यूपोर्ट क्या है?

व्यूपोर्ट एक ब्राउज़र विंडो या डिवाइस के डिस्प्ले क्षेत्र को संदर्भित करता है जहां उपयोगकर्ता वेब पेज देख रहा है। डेस्कटॉप पर, ब्राउज़र विंडो का आकार व्यूपोर्ट बन जाता है, जबकि मोबाइल उपकरणों जैसे स्मार्टफोन और टैबलेट पर, डिवाइस की स्क्रीन का आकार व्यूपोर्ट बन जाता है।

व्यूपोर्ट निर्दिष्ट करना

व्यूपोर्ट को नियंत्रित करने के लिए, आप HTML में <meta> टैग का उपयोग करके व्यूपोर्ट सेटिंग्स को कॉन्फ़िगर करते हैं। यह सेटिंग आपको यह निर्दिष्ट करने की अनुमति देती है कि पृष्ठ विभिन्न उपकरणों पर कैसे प्रदर्शित होगा।

मूल वाक्यविन्यास 

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

यह कोड व्यूपोर्ट की चौड़ाई को डिवाइस की चौड़ाई के अनुरूप सेट करता है और पृष्ठ के प्रारंभिक डिस्प्ले स्केल (ज़ूम स्तर) को 1.0 (100% डिस्प्ले) पर सेट करता है।

व्यूपोर्ट की मुख्य गुण

व्यूपोर्ट के content विशेषता के साथ मुख्य रूप से निर्दिष्ट की जा सकने वाली विशेषताएँ निम्नलिखित हैं:।

  1. width

    • width के लिए व्यूपोर्ट की चौड़ाई निर्दिष्ट करें। इसे device-width पर सेट करके, व्यूपोर्ट को डिवाइस की भौतिक चौड़ाई (पिक्सल में) के अनुसार समायोजित किया जाता है।
    • उदाहरण: width=device-width

  2. height

    • height के लिए व्यूपोर्ट की ऊंचाई निर्दिष्ट करें, हालाँकि आमतौर पर केवल चौड़ाई सेट की जाती है और ऊंचाई को अक्सर निर्दिष्ट नहीं किया जाता। इसे device-height पर सेट करके, व्यूपोर्ट डिवाइस की भौतिक ऊंचाई (पिक्सल में) के अनुरूप बनता है।
    • उदाहरण: height=device-height

  3. initial-scale

    • initial-scale के लिए पृष्ठ के प्रारंभिक ज़ूम स्तर को निर्दिष्ट करें। 1.0 का अर्थ है कि डिवाइस का 100% ज़ूम स्तर।
    • उदाहरण: initial-scale=1.0

  4. minimum-scale

    • minimum-scale के लिए ज़ूम आउट करने का न्यूनतम स्केल निर्दिष्ट करें। इसे 0.5 पर सेट करके, आप अधिकतम 50% तक ज़ूम आउट कर सकते हैं।
    • उदाहरण: minimum-scale=0.5

  5. maximum-scale

    • maximum-scale के लिए ज़ूम इन करने का अधिकतम स्केल निर्दिष्ट करें। इसे 2.0 पर सेट करके, आप अधिकतम 200% तक ज़ूम इन कर सकते हैं।
    • उदाहरण: 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">

यह सेटिंग स्वचालित रूप से पेज को मोबाइल उपकरणों की स्क्रीन चौड़ाई के अनुसार समायोजित करती है और सुनिश्चित करती है कि पेज 100% ज़ूम स्तर पर प्रदर्शित हो। यह प्रतिक्रियाशील डिज़ाइन के लिए एक मूलभूत सेटिंग है।

  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">

यह सेटिंग व्यू-पोर्ट की चौड़ाई को 1024 पिक्सल पर निर्धारित करती है और प्रारंभिक प्रदर्शन पर ज़ूम स्तर को 100% पर सेट करती है। इसका उपयोग तब किया जाता है जब आप डिवाइस की चौड़ाई की परवाह किए बिना पेज चौड़ाई को स्थिर रखना चाहते हैं।

viewport की भूमिका

विशेष रूप से मोबाइल उपकरणों पर प्रदर्शन को अनुकूलित करने के लिए viewport सेट करना आवश्यक है। व्यू-पोर्ट को सही ढंग से कॉन्फ़िगर करके, आप निम्नलिखित जैसी समस्याओं को रोक सकते हैं:।

  • डिवाइस की चौड़ाई को पार करने से पेज को रोकता है, जिससे स्क्रॉलिंग की आवश्यकता होगी।
  • पाठ और छवियों को पढ़ने में बहुत छोटे होने से रोकता है।
  • पूरे पृष्ठ को ज़ूम आउट होने से रोकता है, जिससे इंटरैक्ट करना मुश्किल हो जाता है।

सारांश

  • viewport का उपयोग उस डिवाइस के प्रदर्शन क्षेत्र को नियंत्रित करने के लिए किया जाता है जो वेबपेज दिखा रहा है।
  • यह मुख्य रूप से मोबाइल डिवाइस पर प्रदर्शन को अनुकूलित करने के लिए उपयोग किया जाता है और उत्तरदायी डिज़ाइन में एक महत्वपूर्ण भूमिका निभाता है।
  • width=device-width और initial-scale=1.0 जैसी सेटिंग्स को मानक उत्तरदायी वेब डिज़ाइन में सामान्यतः उपयोग किया जाता है।

viewport को सही ढंग से सेट करना मोबाइल उपयोगकर्ताओं को एक आरामदायक देखने का अनुभव प्रदान कर सकता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

CSS में प्रतिसादात्मक डिज़ाइन का अवलोकन