व्यूपोर्ट उस दृश्य क्षेत्र को संदर्भित करता है जिसके माध्यम से उपयोगकर्ता किसी डिस्प्ले डिवाइस पर या सॉफ़्टवेयर एप्लिकेशन के भीतर सामग्री के साथ इंटरैक्ट करते हैं। यह अवधारणा वेब डिज़ाइन, कंप्यूटर ग्राफ़िक्स आदि सहित विभिन्न क्षेत्रों में आम है आभासी यथार्थ.
व्यूपोर्ट कैसे सेट करें
इसके आधार पर व्यूपोर्ट अलग-अलग तरीके से स्थापित किए जाते हैं प्रोग्रामिंग भाषा.
HTML में व्यूपोर्ट कैसे सेट करें
व्यूपोर्ट सेट करना एचटीएमएल प्रतिक्रियाशील वेब डिज़ाइन बनाने के लिए महत्वपूर्ण है जो विभिन्न स्क्रीन आकारों, विशेष रूप से मोबाइल उपकरणों पर अच्छी तरह से अनुकूल हो। यह आमतौर पर का उपयोग करके हासिल किया जाता है अपने HTML दस्तावेज़ में टैग करें अनुभाग। व्यूपोर्ट मेटा टैग ब्राउज़र को पृष्ठ के आयाम और स्केलिंग को नियंत्रित करने का निर्देश देता है।
HTML दस्तावेज़ में व्यूपोर्ट कैसे सेट करें, इस पर एक बुनियादी मार्गदर्शिका यहां दी गई है:
व्यूपोर्ट मेटा टैग का उपयोग करें
के अंदर आपके HTML के अनुभाग में निम्नलिखित शामिल करें मेटा टैग:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
व्यूपोर्ट मेटा टैग विशेषताओं का टूटना
- नाम = "व्यूपोर्ट": यह विशेषता निर्दिष्ट करती है कि मेटा टैग व्यूपोर्ट के लिए विकल्प सेट कर रहा है।
- सामग्री = "चौड़ाई = डिवाइस-चौड़ाई": यह डिवाइस की स्क्रीन की चौड़ाई से मेल खाने के लिए व्यूपोर्ट की चौड़ाई निर्धारित करता है। यह सुनिश्चित करता है कि पेज रेंडरिंग के लिए वास्तविक डिवाइस चौड़ाई का उपयोग करता है, जो रिस्पॉन्सिव डिज़ाइन के लिए आवश्यक है।
- सामग्री = "प्रारंभिक पैमाने = 1.0": जब पृष्ठ पहली बार लोड होता है तो यह प्रारंभिक ज़ूम स्तर को नियंत्रित करता है। इसे 1.0 पर सेट करने से यह सुनिश्चित होता है कि पृष्ठ बिना किसी ज़ूम के 1:1 पैमाने पर दिखाया गया है।
अतिरिक्त विकल्प
- न्यूनतम-पैमाना और अधिकतम-पैमाना: ये विशेषताएँ क्रमशः न्यूनतम और अधिकतम ज़ूम स्तर को परिभाषित करती हैं, जिन तक उपयोगकर्ता पहुँच सकता है। उदाहरण के लिए, न्यूनतम-पैमाना = 1.0 और अधिकतम-स्केल=5.0.
- उपयोगकर्ता-मापनीय: इसे इस पर सेट किया जा सकता है हाँ or नहीं (या 1 or 0) उपयोगकर्ता को वेबपेज को स्केल करने (ज़ूम करने) की अनुमति देने या अस्वीकार करने के लिए। उदाहरण के लिए, उपयोक्ता-स्केलेबल=नहीं ज़ूमिंग को रोकता है, जो कुछ डिज़ाइनों में उपयोगी हो सकता है लेकिन पहुंच में बाधा भी डाल सकता है।
पूर्ण उदाहरण
यहां बताया गया है कि आप अतिरिक्त विकल्पों के साथ HTML दस्तावेज़ में व्यूपोर्ट कैसे सेट कर सकते हैं:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a responsive webpage.</p>
</body>
</html>
याद रखने वाली चीज़ें
उपयोगकर्ताओं की ज़ूम करने की क्षमता को प्रतिबंधित करते हुए उपयोक्ता-स्केलेबल=नहीं या सख्त सेटिंग करके अधिकतम पैमाने डिज़ाइन की एकरूपता में योगदान देता है, आमतौर पर यह सुनिश्चित करने के लिए ज़ूम को सीमित करने से बचने की सिफारिश की जाती है कि दृष्टिबाधित लोग अभी भी आपकी साइट का प्रभावी ढंग से उपयोग कर सकें।
व्यूपोर्ट सेट करने के बाद, यह सुनिश्चित करने के लिए कि लेआउट और स्केलिंग अपेक्षा के अनुरूप व्यवहार करते हैं, विभिन्न उपकरणों और स्क्रीन आकारों पर अपने वेबपेज का परीक्षण करें।
सीएसएस में व्यूपोर्ट कैसे सेट करें
व्यूपोर्ट सेट करना सीएसएस इसमें सीधे तौर पर "व्यूपोर्ट" सेटिंग शामिल नहीं है क्योंकि व्यूपोर्ट मूल रूप से एक HTML और ब्राउज़र अवधारणा है, जिसे मुख्य रूप से इसके माध्यम से प्रबंधित किया जाता है <meta name="viewport"> HTML में टैग करें. हालाँकि, सीएसएस प्रतिक्रियाशील डिज़ाइन बनाने में महत्वपूर्ण भूमिका निभाता है जो मीडिया प्रश्नों के माध्यम से व्यूपोर्ट के आकार के अनुकूल होता है, flexible लेआउट, और स्केलेबल इकाइयाँ।
प्रमुख धारणाएँ
डिज़ाइन को किसी भी व्यूपोर्ट आकार के लिए उत्तरदायी और अनुकूलनीय बनाने के लिए, निम्नलिखित सीएसएस तकनीकों का उपयोग करें:
- मीडिया के प्रश्नों। मीडिया क्वेरीज़ सीएसएस में रिस्पॉन्सिव डिज़ाइन की आधारशिला हैं। वे आपको व्यूपोर्ट की चौड़ाई, ऊंचाई, अभिविन्यास और अन्य विशेषताओं के आधार पर शैलियों को लागू करने की अनुमति देते हैं। जब व्यूपोर्ट की चौड़ाई 600 पिक्सेल या उससे कम होती है, तो निम्न मीडिया क्वेरी बॉडी पर एक पृष्ठभूमि रंग लागू करती है, जो आमतौर पर एक मोबाइल डिवाइस को इंगित करती है।
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}- Flexible लेआउट। का प्रयोग flexनिश्चित आकारों के बजाय उपयुक्त चौड़ाई और ऊँचाई यह सुनिश्चित करती है कि आपका लेआउट व्यूपोर्ट के अनुकूल हो। आप आयामों को परिभाषित करने के लिए प्रतिशत, वीडब्ल्यू (व्यूपोर्ट चौड़ाई), वीएच (व्यूपोर्ट ऊंचाई), और अन्य सापेक्ष इकाइयों का उपयोग कर सकते हैं। यह उदाहरण दिखाता है कि कंटेनर को व्यूपोर्ट की चौड़ाई का 80% कैसे बनाया जाए, व्यूपोर्ट का आकार बदलते ही स्वचालित रूप से समायोजित हो जाए।
.container {
width: 80%;
margin: auto;
}- Flexible छवियाँ और मीडिया। छवियों और वीडियो को व्यूपोर्ट की चौड़ाई से अधिक होने और आपके लेआउट को तोड़ने से रोकने के लिए, उन्हें बनाएं flexible. निम्नलिखित कोड यह सुनिश्चित करता है कि छवियों और वीडियो को उनके मूल आकार तक, उनके युक्त तत्व की चौड़ाई में फिट करने के लिए स्केल किया जाए।
img, video {
max-width: 100%;
height: auto;
}- व्यूपोर्ट इकाइयाँ। सीएसएस व्यूपोर्ट-सापेक्ष इकाइयां प्रदान करता है, जिसमें वीडब्ल्यू (व्यूपोर्ट चौड़ाई), वीएच (व्यूपोर्ट ऊंचाई), वीमिन (वीडब्ल्यू या वीएच से छोटा), और वीमैक्स (वीडब्ल्यू या वीएच से बड़ा) शामिल है। ये व्यूपोर्ट के साथ गतिशील रूप से स्केल करने वाले तत्व बनाने के लिए उपयोगी हो सकते हैं।
.hero {
height: 50vh; /* 50% of the viewport height */
font-size: 4vw; /* font size scales with the viewport width */
}- सीएसएस ग्रिड और Flexडिब्बा। सीएसएस ग्रिड और Flexबॉक्स शक्तिशाली लेआउट मॉडल हैं जो प्रदान करते हैं flexफ़्लोट्स और पोज़िशनिंग का उपयोग किए बिना प्रतिक्रियाशील इंटरफ़ेस डिज़ाइन करने के सक्षम तरीके। Flexबॉक्स एक आयाम में, पंक्ति में या स्तंभ में, लेआउट के लिए आदर्श है। यह ग्रिड लेआउट व्यूपोर्ट आकार को समायोजित करते हुए, आवश्यकतानुसार वस्तुओं को नई पंक्तियों में लपेटने की अनुमति देता है।
.flex-container {
display: flex;
justify-content: space-around;
}
CSS Grid excels at two-dimensional layouts, managing both rows and columns.
<strong><code>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}व्यूपोर्ट और एसईओ
व्यूपोर्ट सेटिंग एसईओ में एक महत्वपूर्ण भूमिका निभाती है क्योंकि यह विभिन्न उपकरणों, विशेषकर मोबाइल पर उपयोगकर्ता के अनुभव को सीधे प्रभावित करती है। Google जैसे खोज इंजन मोबाइल उपकरणों पर इंटरनेट ब्राउज़िंग की बढ़ती प्रवृत्ति को पहचानते हुए, रैंकिंग कारक के रूप में मोबाइल मित्रता पर महत्वपूर्ण जोर देते हैं।
जब किसी वेबसाइट को रिस्पॉन्सिव व्यूपोर्ट सेटिंग के साथ डिज़ाइन किया जाता है, तो यह सुनिश्चित करता है कि सामग्री डेस्कटॉप से लेकर स्मार्टफोन तक विभिन्न स्क्रीन आकारों में फिट होने के लिए ठीक से स्केल और समायोजित हो जाती है। यह प्रतिक्रिया सहज ब्राउज़िंग अनुभव प्रदान करके, बाउंस दरों को कम करके और साइट पर बिताए गए समय को बढ़ाकर उपयोगकर्ता सहभागिता में सुधार करती है। परिणामस्वरूप, उपयुक्त व्यूपोर्ट सेटिंग्स के साथ मोबाइल उपकरणों के लिए अनुकूलित वेबसाइटें खोज इंजन परिणाम पृष्ठों (SERPs) में उच्च रैंक प्राप्त करने की संभावना रखती हैं।
इसके अलावा, Google और अन्य खोज इंजन मोबाइल-फर्स्ट इंडेक्सिंग का उपयोग करते हैं, जिसका अर्थ है कि वे मुख्य रूप से इंडेक्सिंग और रैंकिंग के लिए सामग्री के मोबाइल संस्करण का उपयोग करते हैं। इसके लिए एक अच्छी तरह से कॉन्फ़िगर किया गया व्यूपोर्ट आवश्यक है, क्योंकि यह ब्राउज़र को बताता है कि छोटी स्क्रीन पर स्केलिंग और रेंडरिंग को कैसे संभालना है। यदि किसी साइट का व्यूपोर्ट सही ढंग से सेट नहीं है, तो यह मोबाइल उपकरणों पर अच्छी तरह से प्रस्तुत नहीं हो सकता है, जिससे उपयोगकर्ता अनुभव खराब हो सकता है जो साइट के एसईओ पर नकारात्मक प्रभाव डाल सकता है क्योंकि
व्यूपोर्ट सर्वोत्तम प्रथाएँ
विभिन्न प्रकार के उपकरणों पर अच्छा प्रदर्शन करने वाली उत्तरदायी, उपयोगकर्ता-अनुकूल वेबसाइट बनाने के लिए व्यूपोर्ट सर्वोत्तम प्रथाओं का पालन करना आवश्यक है। यहां विचार करने के लिए कई प्रमुख सर्वोत्तम प्रथाएं दी गई हैं।
1. व्यूपोर्ट मेटा टैग का उपयोग करें
हमेशा व्यूपोर्ट मेटा टैग शामिल करें विभिन्न उपकरणों पर व्यूपोर्ट के आकार और पैमाने को नियंत्रित करने के लिए आपके HTML दस्तावेज़ों का अनुभाग। यह टैग यह सुनिश्चित करता है कि डिवाइस की चौड़ाई और प्रारंभिक पैमाने से मेल खाने के लिए व्यूपोर्ट की चौड़ाई को 1 पर सेट करके आपकी साइट सभी डिवाइसों पर सही ढंग से प्रदर्शित हो।
2. सुनिश्चित करें कि सामग्री स्क्रीन से अधिक चौड़ी न हो
क्षैतिज स्क्रॉलिंग से बचने के लिए अपना लेआउट और सामग्री डिज़ाइन करें। अपनी साइट के लेआउट को विभिन्न स्क्रीन आकारों की सीमाओं के भीतर फिट करने के लिए सीएसएस मीडिया क्वेरीज़ का उपयोग करें। स्क्रीन के किनारे से फैलने वाली सामग्री खराब उपयोगकर्ता अनुभव पैदा करती है और आपकी साइट के मोबाइल-फ्रेंडली स्कोर को नुकसान पहुंचाती है, जिससे एसईओ प्रभावित होता है।
3. उत्तरदायी डिजाइन तकनीकों का प्रयोग करें
उपयोग flexउपयोगकर्ता के डिवाइस के अनुकूल एक प्रतिक्रियाशील डिज़ाइन बनाने के लिए ible ग्रिड लेआउट, छवियां और CSS मीडिया क्वेरीज़। रिस्पॉन्सिव डिज़ाइन यह सुनिश्चित करता है कि आपकी वेबसाइट न्यूनतम आकार बदलने, पैनिंग और स्क्रॉलिंग के साथ आसान पढ़ने और नेविगेशन प्रदान करती है।
4. मोबाइल-फर्स्ट दृष्टिकोण अपनाएं
पहले अपनी साइट को मोबाइल उपकरणों के लिए डिज़ाइन करें, फिर बड़ी स्क्रीन तक बढ़ाएँ। इसमें मोबाइल उपयोगकर्ताओं के लिए आवश्यक सामग्री और कार्यक्षमता को प्राथमिकता देना शामिल है। मोबाइल-फर्स्ट दृष्टिकोण आज अधिकांश उपयोगकर्ताओं के इंटरनेट तक पहुंचने के तरीके और खोज इंजन की मोबाइल-फर्स्ट इंडेक्सिंग प्रथाओं के साथ संरेखित होता है।
5. टच इंटरैक्शन के लिए अनुकूलन करें
बटन और लिंक जैसे डिज़ाइन तत्व आसानी से टैप करने योग्य होने चाहिए, आकस्मिक टैप को रोकने के लिए उचित आकार और अंतर के साथ। स्पर्श के लिए अनुकूलन से टचस्क्रीन उपकरणों पर आपकी साइट की उपयोगिता में सुधार होता है, जिससे समग्र उपयोगकर्ता अनुभव और जुड़ाव बढ़ता है।
6. उपयुक्त होने पर ज़ूम सक्षम करें
जबकि सेट होना आम बात है उपयोक्ता-स्केलेबल=नहीं कुछ वेब अनुप्रयोगों पर व्यूपोर्ट के पैमाने को लॉक करने के लिए, सामग्री-समृद्ध पृष्ठों पर ज़ूम की अनुमति देने पर विचार करें। उपयोगकर्ताओं को टेक्स्ट या छवियों को अधिक आराम से देखने के लिए ज़ूम इन करने की आवश्यकता हो सकती है, खासकर छोटी स्क्रीन वाले उपकरणों पर। ज़ूम की अनुमति देने से पहुंच और उपयोगकर्ता संतुष्टि में सुधार हो सकता है।
7. सभी डिवाइस और ब्राउज़र पर परीक्षण करें
अनुकूलता सुनिश्चित करने के लिए विभिन्न उपकरणों और ब्राउज़रों पर नियमित रूप से अपनी वेबसाइट की प्रतिक्रिया और प्रदर्शन का परीक्षण करें। विभिन्न डिवाइस और ब्राउज़र आपकी साइट को थोड़े अलग तरीके से प्रस्तुत कर सकते हैं। परीक्षण से समस्याओं की पहचान करने और उन्हें ठीक करने में मदद मिलती है, जिससे सभी आगंतुकों के लिए एक सुसंगत और सकारात्मक उपयोगकर्ता अनुभव सुनिश्चित होता है।
