2010-05-30 10 views
53

एचटीएमएल में व्यूपोर्ट क्या है? क्या आप व्यूपोर्ट विवरणों तक पहुंचने के तरीके पर कुछ उदाहरण दे सकते हैं?एचटीएमएल में व्यूपोर्ट क्या है।

+2

एक अतिरिक्त जानकारी के रूप में::

व्यूपोर्ट यहाँ प्रपत्र बारे में और जानें यहाँ एक अच्छी तस्वीर [मापने व्यूपोर्ट] (http://www.quirksmode.org/mobile/viewports.html# साथ एक लेख है link12)। – informatik01

+0

"व्यूपोर्ट विवरणों तक पहुंचने के लिए कुछ उदाहरण दें" से आपका क्या मतलब है? – Coleman

+0

http://www.w3schools.com/css/css_rwd_viewport।एएसपी –

उत्तर

54

व्यूपोर्ट उस वेबपृष्ठ का हिस्सा है जिसे उपयोगकर्ता वर्तमान में देख सकता है। स्क्रॉलबार पृष्ठ के अन्य हिस्सों को दिखाने के लिए व्यूपोर्ट को ले जाते हैं।

Follow this article's instructions to get the viewport dimensions in Javascript

if (typeof window.innerWidth != 'undefined') 
{ 
     viewportwidth = window.innerWidth, 
     viewportheight = window.innerHeight 
} 
+17

और किसी भी भ्रम से बचने के लिए, यह न तो आपके ब्रोवर की खिड़कियों का आकार है और न ही स्क्रीन रिज़ॉल्यूशन है। उसी विंडो आकार के लिए, अधिक टूलबार वाले ब्राउज़र वाले एक छोटे व्यूपोर्ट होंगे। – FelipeAls

4

व्यूपोर्ट एक आभासी ब्राउज़र प्रतिपादन इंजन द्वारा उपयोग निर्धारित करने के लिए कैसे सामग्री में वृद्धि की और आकार है जब यह शुरू में वर्तमान स्क्रीन पर प्रदान की गई है क्षेत्र है। यह तुम्हारी मदद करेगा:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

8

मुझे लगता है कि ViewPort सिर्फ एक क्षेत्र ब्राउज़र में वेब सामग्री प्रदर्शित करने के लिए है। और विभिन्न ब्राउज़रों की ViewPort के आकार के लिए अपनी सेटिंग होती है, उदाहरण के लिए, सफारी की डिफ़ॉल्ट ViewPort चौड़ाई 980 पिक्सेल है। इसलिए, यदि आप जिस वास्तविक वेब पेज को देखना चाहते हैं वह 980 पिक्सेल से छोटा है, तो सफारी में डिफ़ॉल्ट रूप से वेब पेज तक पहुंचने पर सफारी में एक खाली प्रदर्शन क्षेत्र होना चाहिए। इसलिए, यही कारण है कि कभी-कभी ब्राउज़र में बेहतर वेब सामग्री प्रदर्शन के लिए हमें ViewPort को कॉन्फ़िगर करने की आवश्यकता होती है।

नीचे की तरह

, उदाहरण के लिए:

<meta name="viewport" content="width=device-width"> 

और यह भी Paul's answer पढ़ें। मुझे लगता है कि उसने पहले से ही ViewPort के उपयोग की व्याख्या की है।

0

व्यूपोर्ट ब्राउज़र पर आपके वेबपृष्ठ का दृश्य क्षेत्र है। <meta name="viewport" का उपयोग करके आप सेट कर सकते हैं कि विभिन्न डिवाइसों पर आपकी साइट की सामग्री कैसे प्रदान की जाती है। व्यक्तिगत रूप से मुझे उपयोग करना पसंद है: <meta name="viewport" content="width=device-width, initial-scale=1.0>

1

व्यूपोर्ट उपयोगकर्ता के वेब पेज का दृश्य क्षेत्र है।

व्यूपोर्ट डिवाइस से डिवाइस में भिन्न होता है, मोबाइल फोन में कंप्यूटर स्क्रीन की तुलना में एक छोटा व्यूपोर्ट होगा।

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

फिर, जब लोग टैबलेट और मोबाइल फोन का उपयोग कर इंटरनेट सर्फ करना शुरू करते थे, तो व्यूपोर्ट फिट करने के लिए निश्चित आकार के वेब पेज बहुत बड़े थे। इस समस्या को ठीक करने के लिए वेब सफारी ने व्यूपोर्ट के आकार और स्केल को नियंत्रित करने के लिए "व्यूपोर्ट मेटा टैग" (safari documentation) पेश किया। कई अन्य मोबाइल ब्राउज़र अब इस टैग का समर्थन करते हैं, हालांकि यह किसी भी वेब मानक का हिस्सा नहीं है।

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

यह ब्राउज़र बता देंगे डिवाइस पर ही की चौड़ाई के लिए सामग्री की चौड़ाई सेट करने के लिए और लोड पर 1 के लिए है कि सामग्री पैमाने पर करने के। http://fend-tricks.com/responsive-web-design-with-viewport/

संबंधित मुद्दे