HTML शी संबंधित मुख्य समस्या म्हणजे व्ह्यूपोर्ट स्मार्टफोनच्या आकारात बदलणे ही आहे की यामुळे वेबसाइट प्रतिसादहीन होऊ शकते किंवा चुकीचे प्रदर्शित होऊ शकते. याचे कारण असे की जेव्हा व्ह्यूपोर्ट बदलला जातो, तेव्हा वेबसाइट लहान स्क्रीन आकारासाठी ऑप्टिमाइझ केली जाऊ शकत नाही आणि ती त्यातील सामग्री योग्यरित्या कमी करू शकत नाही. याव्यतिरिक्त, काही वैशिष्ट्ये लहान स्क्रीन आकारावर योग्यरित्या कार्य करू शकत नाहीत, जसे की नेव्हिगेशन मेनू किंवा परस्परसंवादी घटक.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. कोडची ही ओळ एक मेटा टॅग आहे, जी ब्राउझरला HTML दस्तऐवजाची माहिती पुरवते.
2. नाव विशेषता "व्ह्यूपोर्ट" वर सेट केली आहे, जी ब्राउझरला सांगते की या टॅगमध्ये पृष्ठ भिन्न उपकरणांवर कसे प्रदर्शित केले जावे याबद्दल माहिती आहे.
3. सामग्री विशेषता “width=device-width, initial-scale=1.0” वर सेट केली आहे, जी ब्राउझरला सांगते की त्याने डिव्हाइसची रुंदी पृष्ठाची रुंदी म्हणून वापरली पाहिजे आणि आवश्यक असल्यास ते तिथून वर किंवा खाली स्केल करा.
उत्तरदायी वेब डिझाइन
रिस्पॉन्सिव्ह वेब डिझाईन हा वेब डिझाईनचा एक दृष्टीकोन आहे ज्यामुळे वेब पेजेस विविध उपकरणांवर आणि विंडो किंवा स्क्रीन आकारांवर चांगले रेंडर होतात. हे लवचिक ग्रिड आणि लेआउट, प्रतिमा आणि CSS मीडिया क्वेरीचा बुद्धिमान वापर यांचे संयोजन वापरते. रिस्पॉन्सिव्ह वेबसाइट्स इष्टतम पाहण्याचा अनुभव प्रदान करण्यासाठी डिझाइन केल्या आहेत—किमान आकारमान, पॅनिंग आणि स्क्रोलिंगसह सहज वाचन आणि नेव्हिगेशन—डिव्हाइसच्या विस्तृत श्रेणीमध्ये (डेस्कटॉप संगणक मॉनिटरपासून मोबाइल फोनपर्यंत).
एचटीएमएलमध्ये, खालील तंत्रांचा वापर करून प्रतिसादात्मक डिझाइन प्राप्त केले जाऊ शकते:
• लवचिक ग्रिड - लेआउट घटकांसाठी पिक्सेल्ससारख्या निश्चित-रुंदीच्या युनिट्सऐवजी टक्के किंवा ईएमएस सारख्या संबंधित युनिट्सचा वापर केल्याने पृष्ठास वेगवेगळ्या स्क्रीन आकारांशी लवचिकपणे जुळवून घेता येते.
• मीडिया क्वेरी - CSS3 मीडिया क्वेरी डेव्हलपरला वेगवेगळ्या डिव्हाइस रुंदीसाठी भिन्न शैली निर्दिष्ट करण्यास अनुमती देतात. हे वापरल्या जाणार्‍या डिव्हाइसवर अवलंबून पृष्ठ लेआउटला त्यानुसार समायोजित करण्यास अनुमती देते.
• प्रतिसादात्मक प्रतिमा – HTML5 मधील srcset विशेषता वापरून प्रतिमा प्रतिसादात्मक बनवल्या जाऊ शकतात ज्यामुळे विकसकांना वेगवेगळ्या उपकरणांसाठी वेगवेगळ्या रिझोल्यूशनवर प्रतिमेच्या एकाधिक आवृत्त्या निर्दिष्ट करता येतात.
• लवचिक व्हिडिओ - CSS मधील ऑब्जेक्ट-फिट गुणधर्म वापरून व्हिडिओ देखील प्रतिसादात्मक केले जाऊ शकतात जे विकसकांना त्यांच्या आकारानुसार त्यांच्या कंटेनरमध्ये व्हिडिओ कसे मोजावे हे निर्दिष्ट करण्यास अनुमती देते.
व्ह्यूपोर्ट मेटा टॅग
व्ह्यूपोर्ट मेटा टॅग हा एक एचटीएमएल घटक आहे जो ब्राउझरला पृष्‍ठाचे परिमाण आणि वापरल्या जाणार्‍या डिव्‍हाइसला अनुरूप स्केलिंग कसे समायोजित करायचे ते सांगतो. स्मार्टफोन आणि टॅब्लेट यांसारख्या विविध उपकरणांवर वेब पृष्ठ कसे दिसते हे नियंत्रित करण्यासाठी याचा वापर केला जातो. व्ह्यूपोर्ट मेटा टॅग वेब पृष्ठाची रुंदी सेट करण्यासाठी, ते वर किंवा खाली स्केल करण्यासाठी आणि वापरकर्त्यांना झूम इन किंवा आउट करण्याची परवानगी आहे की नाही हे निर्दिष्ट करण्यासाठी वापरला जाऊ शकतो. हे प्रारंभिक स्केल, कमाल-स्केल, वापरकर्ता-स्केलेबल गुणधर्म आणि बरेच काही सेट करण्यासाठी देखील वापरले जाऊ शकते.
मी माझी वेबसाइट माझ्या फोन स्क्रीनवर कशी बसवायची
वेबसाइट HTML मध्ये फोन स्क्रीनवर बसवण्यासाठी, तुम्ही व्ह्यूपोर्ट मेटा टॅग वापरू शकता. हा टॅग तुम्हाला तुमची वेबसाइट वेगवेगळ्या डिव्हाइसवर कशी प्रदर्शित केली जाते हे नियंत्रित करण्याची परवानगी देतो. तुम्ही व्ह्यूपोर्टची रुंदी डिव्हाइसच्या रुंदीच्या बरोबरीने सेट करू शकता, जेणेकरून तुमची वेबसाइट कोणत्याही डिव्हाइसच्या स्क्रीनवर बसण्यासाठी त्याचा आकार आपोआप समायोजित करेल. याव्यतिरिक्त, तुमची वेबसाइट वेगवेगळ्या डिव्हाइसवर कशी दिसते हे आणखी सानुकूल करण्यासाठी तुम्ही तुमच्या CSS कोडमधील मीडिया क्वेरी देखील वापरू शकता.
