व्ह्यूपोर्ट टॅग - ते काय आहे? व्ह्यूपोर्ट मेटा टॅग, मोबाइल ब्राउझरमध्ये वेब पृष्ठे स्केलिंग करणे

स्मार्टफोन्स आणि मोबाइल ब्राउझरच्या आगमनाने, वेबसाइट्सना कसे तरी मोबाइल डिव्हाइसवर आणि त्वरीत अनुकूल करणे आवश्यक होते. म्हणून, ब्राउझर डेव्हलपर आले आणि व्ह्यूपोर्ट मेटा टॅग लागू केले.

साइटच्या गैर-अनुकूलित डिझाइनवरील मजकूर खूप लहान आहे आणि वाचणे आणि समजणे खूप कठीण आहे; आपल्याला सतत स्क्रीन "स्ट्रोकिंग" करणे, साइटवरील मजकूर मोठा करणे आणि वाचताना उजवीकडे जाणे आवश्यक आहे. हे खूप अस्वस्थ आहे. व्ह्यूपोर्ट मेटा टॅग ही समस्या सोडवते.

व्ह्यूपोर्ट मेटा टॅगचे अचूक स्पेलिंग

अशा प्रकारे, आम्ही ब्राउझरला सांगतो की साइटच्या सामग्रीचे (सामग्री) पाहण्याचे क्षेत्र स्मार्टफोन किंवा इतर मोबाइल डिव्हाइसच्या स्क्रीनच्या रुंदीएवढे असावे. आणि हे देखील की सामग्री मोजण्याची आवश्यकता नाही.

येथे व्ह्यूपोर्ट मेटा टॅगशिवाय मोबाइल डिव्हाइस स्क्रीनचा स्क्रीनशॉट आहे किंवा त्याऐवजी त्यावर टिप्पणी दिली आहे:

आणि इथे तीच साइट आहे, फक्त व्ह्यूपोर्ट मेटा टॅग वापरून:

जर तुम्ही हे मोबाईल वरून वाचत असाल तर - .

व्ह्यूपोर्ट मेटा टॅगचे उपलब्ध पॅरामीटर्स आणि मूल्ये

रुंदी

200px ते 10000px पर्यंत उपलब्ध मूल्ये. किंवा तुम्ही डिव्हाइस-रुंदी वापरू शकता. डीफॉल्टनुसार, जर रुंदी निर्दिष्ट केलेली नसेल, तर त्यात खालील पॅरामीटर्स आहेत: मोबाइल सफारी - 980px, Opera - 850px, Android WebKit - 800px, Internet Explorer - 974px.

उंची

223px पासून 10000px पर्यंत उपलब्ध मूल्ये. किंवा तुम्ही डिव्हाइस-उंची वापरू शकता. कोड लिहिताना सहसा हे पॅरामीटर अजिबात निर्दिष्ट केले जात नाही.

प्रारंभिक स्केल

उपलब्ध मूल्ये 0.1 ते 10 पर्यंत आहेत. हे पृष्ठ स्केल आहे. 1.0 किंवा फक्त 1 चे मूल्य म्हणजे स्केलिंग नाही. प्रारंभिक-स्केल मूल्य जितके मोठे असेल तितके मोठे स्केल.

वापरकर्ता-स्केलेबल

उपलब्ध मूल्ये नाही किंवा होय आहेत. अभ्यागत पृष्ठ स्केल बदलू शकतो की नाही हे पॅरामीटर निर्धारित करते. डीफॉल्टनुसार, वापरकर्ता-स्केलेबल पॅरामीटर होय वर सेट केले आहे.

किमान स्केल आणि कमाल स्केल

उपलब्ध मूल्ये 0.1 ते 10 पर्यंत आहेत. पॅरामीटर किमान आणि कमाल स्केल निर्धारित करते जे पृष्ठ अभ्यागत स्वतःसाठी बदलू शकतो. 1.0 किंवा फक्त 1 चे मूल्य म्हणजे स्केलिंग नाही. सफारी मोबाइल ब्राउझरमधील डीफॉल्ट मूल्ये किमान-स्केल="0.25" आणि कमाल-स्केल="1.6" आहेत.

हा उपयुक्त Veiwport मेटा टॅग मोबाइल डिव्हाइसवर पाहिल्यावर तुमची साइट अधिक आकर्षक बनवेल.

सर्वांना शुभेच्छा आणि शुभेच्छा!

शेवटचे अपडेट: 05/03/2016

सर्वप्रथम, अडॅप्टिव्ह डिझाइन वापरण्याच्या मुख्य मुद्द्यांपैकी एक पाहू - व्ह्यूपोर्ट मेटा टॅग (खरं तर, अनुकूली डिझाइन या टॅगपासून सुरू होते). चला खालील वेब पृष्ठासह प्रारंभ करूया:

नियमित वेब पृष्ठ

हे एक मानक वेब पृष्ठ आहे जे नियमित ब्राउझरमध्ये असे दिसेल:

तथापि, जर आम्ही तेच वेबपृष्ठ मोबाईल डिव्हाइस एमुलेटरमध्ये किंवा खऱ्या मोबाईल डिव्हाइसवर चालवले, तर त्यावर काय लिहिले आहे ते वाचण्यास आम्ही क्वचितच सक्षम होऊ:

स्केलिंग वापरून, वापरकर्ता शेवटी तेथे काय लिहिले आहे ते पाहू शकतो. तथापि, हे फार सोयीचे नाही. तथापि, वेब पृष्ठावर बरीच रिकामी जागा आहे, जी फारशी आकर्षक नाही.

असे का होत आहे? वस्तुस्थिती अशी आहे की प्रत्येक मोबाइल ब्राउझर पृष्ठावर काही प्रारंभिक परिमाणे सेट करतो आणि नंतर ते वर्तमान मोबाइल डिव्हाइसच्या स्क्रीन आकाराशी जुळवून घेण्याचा प्रयत्न करतो.

ब्राउझर स्क्रीनवरील संपूर्ण दृश्यमान क्षेत्र व्ह्यूपोर्ट संकल्पनेद्वारे वर्णन केले आहे. मूलत:, व्ह्यूपोर्ट हे क्षेत्र दर्शवते ज्यामध्ये वेब ब्राउझर वेब पृष्ठ "पुश" करण्याचा प्रयत्न करतो. उदाहरणार्थ, iPhone आणि iPod वरील सफारी ब्राउझर 980 पिक्सेलची डीफॉल्ट व्ह्यूपोर्ट रुंदी परिभाषित करतो. म्हणजेच, पृष्ठ प्राप्त केल्यानंतर आणि 980 पिक्सेलच्या रुंदीसह व्ह्यूपोर्टमध्ये प्रवेश केल्यावर, ब्राउझर ते मोबाइल डिव्हाइसच्या आकारात संकुचित करते. उदाहरणार्थ, स्मार्टफोन स्क्रीनची रुंदी 320 पिक्सेल असल्यास, नंतर पृष्ठ या आकारात संकुचित केले जाईल. आणि सर्व पृष्ठ घटकांवर 320/980 चा स्केलिंग घटक लागू केला जाईल.

या प्रकरणात 980 पिक्सेल का वापरले जाते, आणि म्हणा, वास्तविक स्क्रीन आकार का नाही? गोष्ट अशी आहे की डीफॉल्टनुसार ब्राउझरचा असा विश्वास आहे की प्रत्येक वेब पृष्ठ डेस्कटॉपसाठी आहे. आणि डेस्कटॉप साइटची नेहमीची रुंदी 980 पिक्सेल मानली जाऊ शकते.

या प्रकरणात, प्रत्येक ब्राउझरची स्वतःची व्ह्यूपोर्ट क्षेत्र रुंदी असते, वैकल्पिकरित्या 980 पिक्सेल. इतर ब्राउझर प्रारंभिक रुंदीसाठी भिन्न मूल्यांना समर्थन देऊ शकतात. पण ते स्केलिंग देखील करतील.

हे अतिशय आनंददायी चित्र टाळण्यासाठी, तुम्ही व्ह्यूपोर्ट मेटा टॅग वापरला पाहिजे. त्याची खालील व्याख्या आहे:

मेटा टॅगच्या सामग्री विशेषतामध्ये आम्ही खालील पॅरामीटर्स परिभाषित करू शकतो:

आता मेटा टॅग वापरून मागील उदाहरण वेब पृष्ठ सुधारित करू:

नियमित वेब पृष्ठ

व्ह्यूपोर्ट मेटा टॅग वापरून वेब पेज नक्कीच चांगले दिसते. रुंदी=डिव्हाइस-रुंदी पॅरामीटर वापरून, आम्ही वेब ब्राउझरला सांगतो की व्ह्यूपोर्ट क्षेत्राची सुरुवातीची रुंदी 980 पिक्सेल किंवा इतर काही संख्या नसून डिव्हाइस स्क्रीनची वास्तविक रुंदी असावी. तर मग वेब ब्राउझर कोणतेही स्केलिंग करणार नाही कारण आमची व्ह्यूपोर्ट रुंदी आणि रुंदी समान आहे.

आम्ही इतर पर्याय देखील वापरू शकतो, जसे की वापरकर्त्याला पृष्ठाची परिमाणे स्केलिंग करण्यापासून प्रतिबंधित करणे:

शेवटचे अपडेट: 10/31/2015

अर्थात, मोबाइल डिव्हाइससाठी वेबसाइट तयार करताना मोबाइल स्क्रीन आकार सर्वात महत्त्वाच्या आव्हानांपैकी एक आहे. या प्रकरणात, व्ह्यूपोर्ट टॅग आम्हाला ही समस्या टाळण्यास मदत करेल. उदाहरणार्थ, खालील मार्कअप घ्या:

ही एक नियमित साइट आहे

हे पृष्ठ ऑपेरा मोबाइल एमुलेटरमध्ये लॉन्च करून, आम्हाला खालील चित्र मिळते:

झूम वापरून, वापरकर्ता शेवटी तेथे काय लिहिले आहे ते पाहू शकतो. तथापि, हे फार सोयीचे नाही. त्याच वेळी, साइट पृष्ठावर बरीच रिक्त जागा आहे, जी फार छान नाही.

असे का होत आहे? वस्तुस्थिती अशी आहे की प्रत्येक मोबाइल ब्राउझर पृष्ठावर काही प्रारंभिक परिमाणे सेट करतो आणि नंतर ते वर्तमान मोबाइल डिव्हाइसच्या स्क्रीन आकाराशी जुळवून घेण्याचा प्रयत्न करतो.

ब्राउझर स्क्रीनवरील संपूर्ण दृश्यमान क्षेत्र व्ह्यूपोर्ट संकल्पनेद्वारे वर्णन केले आहे. मूलत:, व्ह्यूपोर्ट हे क्षेत्र दर्शवते ज्यामध्ये वेब ब्राउझर वेब पृष्ठ "पुश" करण्याचा प्रयत्न करतो. उदाहरणार्थ, iPhone आणि iPod वरील सफारी ब्राउझर 980 पिक्सेलची डीफॉल्ट व्ह्यूपोर्ट रुंदी परिभाषित करतो. त्यानंतर, सर्व्हरकडून पृष्ठ प्राप्त केल्यानंतर आणि 980 पिक्सेलच्या रुंदीसह व्ह्यूपोर्टमध्ये प्रवेश केल्यावर, ब्राउझर ते मोबाइल डिव्हाइसच्या आकारात संकुचित करते. उदाहरणार्थ, स्मार्टफोन स्क्रीनची रुंदी 320 पिक्सेल असल्यास, नंतर पृष्ठ या आकारात संकुचित केले जाईल. आणि सर्व पृष्ठ घटकांवर 320/980 चा स्केलिंग घटक लागू केला जाईल.

या प्रकरणात 980 पिक्सेल का वापरले जाते, आणि म्हणा, वास्तविक स्क्रीन आकार का नाही? गोष्ट अशी आहे की डीफॉल्टनुसार ब्राउझरचा असा विश्वास आहे की प्रत्येक वेब पृष्ठ डेस्कटॉपसाठी आहे. आणि डेस्कटॉप साइटची नेहमीची रुंदी 980 पिक्सेल मानली जाऊ शकते.

या प्रकरणात, प्रत्येक ब्राउझरची स्वतःची व्ह्यूपोर्ट क्षेत्र रुंदी असते, 980 पिक्सेल आवश्यक नसते, उदाहरणार्थ, IE प्रारंभिक रुंदी म्हणून 1024 पिक्सेलला समर्थन देते. पण एकूण चित्र तेच असेल.

हे अतिशय आनंददायी चित्र टाळण्यासाठी, तुम्ही व्ह्यूपोर्ट मेटा टॅग वापरला पाहिजे. या मेटा टॅगचा वापर ब्राउझरला हे स्पष्ट करेल की ते डेस्कटॉप पृष्ठाशी व्यवहार करत नाही, परंतु मोबाइल डिव्हाइससाठी देखील आहे.

मेटा टॅगची सामान्य घोषणा खालीलप्रमाणे आहे:

मेटा टॅगच्या सामग्री विशेषतामध्ये आम्ही खालील पॅरामीटर्स परिभाषित करू शकतो:

आता मेटा टॅग वापरून मागील उदाहरण वेब पृष्ठ सुधारित करू:

ही एक नियमित साइट आहे

व्ह्यूपोर्ट मेटा टॅग वापरून वेब पेज नक्कीच चांगले दिसते. रुंदी=डिव्हाइस-रुंदी पॅरामीटर वापरून, आम्ही वेब ब्राउझरला सांगतो की व्ह्यूपोर्ट क्षेत्राची सुरुवातीची रुंदी 980 पिक्सेल किंवा इतर काही संख्या नसून डिव्हाइस स्क्रीनची वास्तविक रुंदी असावी. तर मग वेब ब्राउझर कोणतेही स्केलिंग करणार नाही कारण आमची व्ह्यूपोर्ट रुंदी आणि रुंदी समान आहे.

आम्ही इतर पर्याय देखील वापरू शकतो, जसे की वापरकर्त्याला पृष्ठाची परिमाणे स्केलिंग करण्यापासून प्रतिबंधित करणे:

रिस्पॉन्सिव्ह टेम्प्लेटसह काम करताना तुम्ही व्ह्यूपोर्ट मेटा टॅग वापरता यात शंका नाही. पण तुम्हाला माहीत आहे का की व्ह्यूपोर्ट मेटा टॅग नॉन-रिस्पॉन्सिव्ह टेम्प्लेटसाठी देखील उपयुक्त ठरू शकतो? जर तुमच्याकडे तुमच्या प्रोजेक्ट टेम्प्लेटला रिस्पॉन्सिव्हमध्ये रूपांतरित करण्यासाठी वेळ नसेल, तर तुम्ही मोबाइल डिव्हाइसवर तुमच्या डिझाइनचे स्वरूप सुधारण्यासाठी व्ह्यूपोर्ट मेटा टॅग वापरण्यासाठी हे ट्यूटोरियल वाचले पाहिजे.

व्ह्यूपोर्ट मेटा टॅगचा सामान्य वापर

सामान्यत: व्ह्यूपोर्ट मेटा टॅगचा वापर मोबाइल डिव्हाइसवर व्ह्यूपोर्टसाठी रुंदी आणि प्रारंभिक स्केल सेट करण्यासाठी केला जातो. येथे एक उदाहरण आहे.

नॉन-रिस्पॉन्सिव्ह टेम्प्लेटमध्ये व्ह्यूपोर्ट मेटा टॅग वापरणे

डीफॉल्टनुसार, iPhone वर व्ह्यूपोर्ट रुंदी 980px वर सेट केली जाते. पण तुमची रचना या श्रेणीत बसू शकत नाही. टेम्पलेटसाठी मूल्य खूप मोठे किंवा लहान असू शकते. खाली दोन उदाहरणे आहेत. जे मोबाइल उपकरणांवर प्रतिसाद न देणाऱ्या टेम्पलेटचे स्वरूप सुधारण्यासाठी व्ह्यूपोर्ट मेटा टॅग वापरतात.

उदाहरण

तुमच्या मोबाइल डिव्हाइसवरून Themify वेबसाइट पहा.

डावा स्क्रीनशॉट व्ह्यूपोर्ट मेटा टॅग न वापरता साइटचे स्वरूप दर्शवितो. तुमच्या लक्षात येईल की पृष्ठ स्क्रीनच्या दोन्ही बाजूंना स्पर्श करत आहे. तुम्ही 1024px रुंदी निर्दिष्ट करणारा व्ह्यूपोर्ट मेटा टॅग जोडल्यास, डावीकडे आणि उजवीकडे एक अंतर असेल.

दुसरे उदाहरण

जर तुमची रचना खूप अरुंद असेल, तर ती क्लंकी देखील दिसेल. समजा कंटेनरची रुंदी 700px आहे आणि ती जुळवून घेत नाही. या प्रकरणात, देखावा डावीकडील खालील स्क्रीनशॉटप्रमाणे असेल - डावीकडे एक विस्तृत पांढरा पट्टा.

व्ह्यूपोर्ट रुंदी 720px वर सेट करून समस्येचे सहज निराकरण केले जाऊ शकते. डिझाइनची रुंदी बदलत नाही, परंतु मोबाइल डिव्हाइस ते 720px पर्यंत स्केल करेल.

सामान्य त्रुटी

एक सामान्य चूक अशी आहे की विकासक सहसा नॉन-रिस्पॉन्सिव्ह टेम्प्लेटसाठी प्रारंभिक-स्केल=1 वापरतात. या सेटिंगमुळे 100% पृष्ठ स्केलिंगशिवाय रेंडर केले जाते. जर डिझाइन प्रतिसाद देत नसेल, तर वापरकर्त्याला एकतर खूप स्क्रोल करावे लागेल किंवा संपूर्ण पृष्ठ पाहण्यासाठी व्यक्तिचलितपणे झूम सेट करावा लागेल. सर्वात वाईट केस म्हणजे user-scalable=no किंवा कमाल-scale=1 चे संयोजन प्रारंभिक-scale=1 सह. हे साइटवर स्केल करण्याची क्षमता अक्षम करते. आणि स्केलिंगशिवाय संपूर्ण पृष्ठ पाहण्याचा कोणताही मार्ग नाही. जर तुमचा टेम्पलेट प्रतिसाद देत नसेल, तर स्केलिंग अक्षम करू नका किंवा प्रारंभिक स्केल रीसेट करू नका!

किमान मार्कअपसह एक साधे पृष्ठ तयार करूया:

नमस्कार जग!

आता हे पान मोबाईल उपकरणावर उघडूया. ते उघडल्यानंतर, आम्हाला दिसेल की आमचे पृष्ठ असे काहीतरी प्रदर्शित केले जाईल:

तुम्ही बघू शकता, मजकूर वाचण्यासाठी खूप लहान आहे, भरपूर जागा रिकामी आहे आणि हा मजकूर वाचण्यासाठी, आम्हाला त्यावर झूम वाढवावे लागेल.

असे का होत आहे?

मोबाइल ब्राउझरसह समस्या

मोबाइल आणि डेस्कटॉप ब्राउझरची तुलना करताना, सर्वात स्पष्ट फरक आहे स्क्रीन आकार. मोबाइल ब्राउझर, डीफॉल्टनुसार, नियमित डेस्कटॉप ब्राउझरसाठी डिझाइन केलेल्या साइट्स त्यांच्यापेक्षा खूपच वाईट प्रदर्शित करतात: एकतर स्केल कमी करून, मजकूर आणि इतर सामग्री खूप लहान आणि वाचता न येणारी बनवून (आमच्या आवृत्तीप्रमाणे), किंवा फक्त एक छोटासा भाग प्रदर्शित करून. स्क्रीनवर बसणारी साइट.

जर तुम्ही याचा तार्किकदृष्ट्या विचार केला तर याचा अर्थ होतो: मोबाइल ब्राउझर एक पृष्ठ पाहतो आणि असे गृहीत धरतो की ते ब्राउझरच्या डेस्कटॉप आवृत्तीसाठी तयार केले गेले आहे, जे बहुसंख्य साइटसाठी खरे आहे. यावर आधारित, हा ब्राउझर पृष्ठाची रुंदी 980px (Safari iPhone) वर सेट करतो आणि ते सर्वात कमी प्रमाणात प्रदर्शित करून, स्मार्टफोनच्या स्क्रीनवर चांगल्या प्रकारे बसवण्याचा प्रयत्न करतो. सामान्यतः, साइटची रुंदी अंदाजे एवढी असते, म्हणून जेव्हा तुम्ही मोबाइल डिव्हाइसवर सरासरी वेब पृष्ठ उघडता तेव्हा ते त्याच्या पूर्ण रुंदीपर्यंत पसरते, परंतु त्याच्या मूळ आकारापेक्षा 2-3 पट लहान असते.

म्हणून, आम्ही स्मार्टफोनसाठी साइट ऑप्टिमाइझ करू इच्छित असल्यास, हा पर्याय कार्य करत नाही. आम्हाला ब्राउझरला हे सांगणे आवश्यक आहे की आमचे पृष्ठ मोबाइल डिव्हाइसवर प्रदर्शित करण्याचा हेतू आहे आणि व्ह्यूपोर्टच्या योग्य वर्तनासाठी नियम सेट करणे आवश्यक आहे.

आणि यासाठीच आपण मेटा टॅग वापरणार आहोत व्ह्यूपोर्ट, जे Apple द्वारे सादर केले गेले आणि नेहमीप्रमाणे, इतरांनी कॉपी केले.

ब्लॉकमध्ये जोडा खालील ओळ:

आणि परिणामी असे होईल:

तो पूर्णपणे वेगळा मामला आहे. वर व्ह्यूपोर्ट मेटा टॅग सेट करून "डिव्हाइस-रुंदी", आम्ही ब्राउझरला सांगत आहोत की व्ह्यूपोर्टची रुंदी ही त्या उपकरणाची रुंदी आहे, त्याऐवजी मानक 980px रुंदी ती डीफॉल्टनुसार गृहीत धरू शकते. मोठ्या संख्येने स्मार्टफोनवर, स्क्रीनची रुंदी 320px (पोर्ट्रेट मोडमध्ये) असते. तुम्ही स्वतः रुंदी 320px वर सेट करू शकता, जे समान परिणाम देईल, परंतु काही स्मार्टफोन्सवर स्क्रीनची रुंदी भिन्न असू शकते, म्हणून सर्वोत्तम पर्याय म्हणजे डिव्हाइस-रुंदी वापरणे.

व्ह्यूपोर्ट परिभाषित करण्यासाठी सर्वात सामान्य पर्यायांपैकी एक खालील पर्याय आहे:

जे पृष्ठाची रुंदी परिभाषित करते आणि प्रारंभिक स्केल सेट करते.

तसेच, आपण अनेकदा हा पर्याय शोधू शकता:

या प्रकरणात, पृष्ठ ज्या डिव्हाइसवर उघडले आहे त्याच्या रुंदीवर सेट केले आहे आणि कोणतेही स्केलिंग प्रतिबंधित आहे - लोड करताना प्रारंभिक आणि लोड झाल्यानंतर सानुकूल स्केलिंग दोन्ही. या मोडमध्ये, मोबाइल वेब पृष्ठ मोबाइल अनुप्रयोग म्हणून कार्य करते, जेथे वापरकर्ता फक्त अनुलंब किंवा क्षैतिजरित्या स्क्रोल करू शकतो. तथापि, अशा एंट्रीचा आंधळेपणाने वापर न करणे चांगले आहे, कारण डिझाईन कल्पना आवश्यक असल्याशिवाय वापरकर्त्याला झूम आउट आणि इच्छेनुसार झूम इन करण्यास मनाई केली जाऊ शकत नाही. उदाहरणार्थ, खूप लहान फॉन्ट मजकूराची वाचनीयता कमी करते आणि या प्रकरणात अंदाजे वापरणे आवश्यक आहे.

व्ह्यूपोर्ट मेटा टॅग तुलनेने नवीन आहे, त्यामुळे तो सध्या सर्व ब्राउझरद्वारे समर्थित नाही, विशेषतः जुन्या स्मार्टफोन मॉडेलसाठी. अशा परिस्थितीत, काही जुन्या पद्धती वापरणे अर्थपूर्ण आहे जे ब्राउझरला मोबाइल वेबसाठी ऑप्टिमाइझ केलेले पृष्ठ ओळखण्यास अनुमती देतात. हे खालील मेटा टॅग वापरून केले जाऊ शकते:

तुम्ही या आणि इतर विशिष्ट मोबाइल टॅगबद्दल अधिक वाचू शकता.

व्ह्यूपोर्ट मेटा टॅगसाठी संभाव्य पर्याय

व्ह्यूपोर्ट सुसंगतता सारणी.

दोन व्ह्यूपोर्ट्स

त्यामुळे आमच्या CSS टेम्पलेटसाठी व्ह्यूपोर्ट खूपच अरुंद आहे असे समजू. व्ह्यूपोर्ट रुंद करणे हा स्पष्ट उपाय आहे. तथापि, प्रथम, व्ह्यूपोर्टची संकल्पना दोन भागांमध्ये विभागूया: व्हिज्युअल व्ह्यूपोर्ट आणि पेज व्ह्यूपोर्ट.

स्टॅक ओव्हरफ्लोवर जॉर्ज कमिन्स यांनी व्ह्यूपोर्टची संकल्पना अतिशय चांगल्या प्रकारे स्पष्ट केली आहे:

स्थिर आकार आणि आकारासह एक मोठी प्रतिमा म्हणून पृष्ठ व्ह्यूपोर्टचा विचार करा. आता एका लहान फ्रेमची कल्पना करा ज्याद्वारे तुम्ही ही मोठी प्रतिमा पाहता. ही फ्रेम एका अपारदर्शक सामग्रीने वेढलेली आहे जी तुम्हाला त्यातील काही भाग वगळता संपूर्ण मोठी प्रतिमा पाहण्यापासून प्रतिबंधित करते. फ्रेममधून दिसणाऱ्या मोठ्या प्रतिमेचा भाग व्हिज्युअल व्ह्यूपोर्ट असेल. तुम्ही फ्रेमसह मोठ्या प्रतिमेपासून दूर गेल्यास (झूम आउट करा, म्हणजे स्केल कमी करा), तुम्ही संपूर्ण इमेज एकाच वेळी पाहू शकता किंवा जवळ येऊ शकता (झूम इन करा, स्केल वाढवा), तर तुम्ही फक्त काही भाग पाहू शकता. प्रतिमा तसेच, तुम्ही फ्रेमचे अभिमुखता (पोर्ट्रेट किंवा लँडस्केप) बदलण्यासाठी फिरवू शकता, तर मोठ्या प्रतिमेचा आकार आणि आकार (पृष्ठ व्ह्यूपोर्ट) नेहमी अपरिवर्तित राहतो.

व्हिज्युअल व्ह्यूपोर्ट- पृष्ठाचा भाग जो सध्या स्क्रीनवर दिसत आहे. वापरकर्ता पृष्ठाचा दृश्यमान भाग बदलण्यासाठी स्क्रोल करू शकतो किंवा व्हिज्युअल व्ह्यूपोर्टचा आकार बदलण्यासाठी झूम वापरू शकतो.

पृष्ठ लेआउट, विशेषत: त्याची रुंदी टक्केवारी म्हणून निर्दिष्ट केली असल्यास, सापेक्ष गणना केली जाते पृष्ठ व्ह्यूपोर्ट, जे व्हिज्युअल व्ह्यूपोर्टपेक्षा लक्षणीयरीत्या विस्तृत आहे.

अशाप्रकारे, -element प्रारंभी पृष्ठ व्ह्यूपोर्टची रुंदी घेते आणि नंतर CSS असे वागते की स्क्रीन फोन स्क्रीनपेक्षा खूपच विस्तृत आहे. हे साइटला डेस्कटॉप ब्राउझरप्रमाणेच वर्तन प्रदान करते.

व्हिज्युअल व्ह्यूपोर्ट स्वतः किती रुंद आहे? हे ब्राउझरवर अवलंबून असते. Safari iPhone 980px वापरते, Opera 850px वापरते, Android WebKit 800px वापरते आणि IE 974px वापरते.

काही ब्राउझर वेगळ्या पद्धतीने वागतात:

Symbian WebKit पृष्ठ व्ह्यूपोर्टला व्हिज्युअल व्ह्यूपोर्टशी समतुल्य करण्याचा प्रयत्न करते आणि याचा अर्थ टक्केवारी-रुंदीचे घटक अप्रत्याशितपणे वागू शकतात. तथापि, परिपूर्ण मूल्यांमुळे पृष्ठ व्हिज्युअल व्ह्यूपोर्टमध्ये बसत नसल्यास, ब्राउझर पृष्ठ व्ह्यूपोर्ट कमाल 850 पिक्सेलपर्यंत वाढवतो.

Samsung WebKit पृष्ठ व्ह्यूपोर्ट रुंदीच्या रुंदीच्या घटकाच्या समान करते.

BlackBerry वर, 100% स्केलसह, पृष्ठ व्ह्यूपोर्ट कोणत्याही परिस्थितीत व्हिज्युअल व्ह्यूपोर्टच्या बरोबरीचे असेल.

झूम करत आहे

दोन्ही व्ह्यूपोर्ट CSS पिक्सेलमध्ये मोजले जातात. तथापि, स्केलिंग दरम्यान, व्हिज्युअल व्ह्यूपोर्टचे परिमाण बदलतात (जसे तुम्ही झूम वाढता, स्क्रीनवर कमी CSS पिक्सेल बसतात), तर पृष्ठ व्ह्यूपोर्टचे परिमाण अपरिवर्तित राहतात. (असे नसल्यास, टक्केवारीच्या रुंदीच्या पुनर्गणनामुळे ब्राउझर सतत पृष्ठ रीफ्लो करेल.)

पृष्ठ व्ह्यूपोर्ट समजून घेणे

पृष्ठ व्ह्यूपोर्टचा आकार अधिक चांगल्या प्रकारे समजून घेण्यासाठी, आपण सर्वात लहान पृष्ठ स्केलवर काय होते ते पहावे. बहुतेक मोबाइल ब्राउझर डीफॉल्टनुसार सर्वात लहान प्रमाणात कोणतेही पृष्ठ प्रदर्शित करतात.

वस्तुस्थिती अशी आहे की ब्राउझर पृष्ठाच्या व्ह्यूपोर्टची परिमाणे कमाल कमी केलेल्या स्केलवर स्क्रीनशी पूर्णपणे जुळतात आणि म्हणूनच व्हिज्युअल व्ह्यूपोर्टच्या समान असतात.

अशा प्रकारे, पृष्ठ व्ह्यूपोर्टची रुंदी आणि उंची स्क्रीनवर सर्वात लहान प्रमाणात प्रदर्शित होणाऱ्या प्रत्येक गोष्टीइतकी असते. जेव्हा वापरकर्ता झूम इन करतो, तेव्हा हे परिमाण अपरिवर्तित राहतात.

पृष्ठ व्ह्यूपोर्टची रुंदी नेहमी सारखीच असते. आपण स्मार्टफोन स्क्रीनचे अभिमुखता बदलल्यास, व्हिज्युअल व्ह्यूपोर्ट बदलेल, परंतु त्याच वेळी मोबाइल ब्राउझर थोडेसे झूम करून नवीन अभिमुखतेशी जुळवून घेईल जेणेकरून पृष्ठ व्ह्यूपोर्ट पुन्हा व्हिज्युअल व्ह्यूपोर्ट सारखीच रुंदी असेल.

यामुळे पृष्ठ व्ह्यूपोर्ट उंचीवर परिणाम झाला आहे, जी आता पोर्ट्रेट अभिमुखतेपेक्षा खूपच लहान आहे. पण विकासकांसाठी उंचीपेक्षा रुंदी महत्त्वाची असते.

Android आणि target-densitydpi

Android डिव्हाइसेसचे स्वतःचे व्ह्यूपोर्ट गुणधर्म आहेत जे भिन्न रिझोल्यूशनसह डिस्प्लेसाठी स्केलिंग अक्षम करते.

HDPI (240dpi) उपकरणांवर कोणतेही स्केलिंग होणार नाही.

या एंट्रीचा अर्थ असा आहे की कोणत्याही Android डिव्हाइसवर कोणतेही स्केलिंग होणार नाही.