2011-06-13 15 views
27

iPhone/iPad की तरह एक मोबाइल डिवाइस के लिए दृश्य व्यूपोर्ट और लेआउट व्यूपोर्ट के बीच अंतर क्या है?दृश्य व्यूपोर्ट और लेआउट व्यूपोर्ट के बीच अंतर?

मैं ऑनलाइन संसाधनों का एक बहुत कुछ सहा है, लेकिन अभी भी इसके बारे में स्पष्ट नहीं कर रहा हूँ है।

उत्तर

31

दृश्य व्यूपोर्ट पृष्ठ का हिस्सा है कि वर्तमान में ऑन-स्क्रीन दिखाया जाता है।

लेआउट व्यूपोर्ट दृश्य व्यूपोर्ट की तुलना में काफी व्यापक हो सकता है, और है कि दिखाई देते हैं और स्क्रीन पर दिखाई नहीं देते तत्व शामिल कर सकते हैं।

एक बड़ी छवि जो आकार या आकृति में परिवर्तन नहीं करता होने के रूप में लेआउट व्यूपोर्ट कल्पना कीजिए। अब कल्पना करें कि आपके पास एक छोटा फ्रेम है जिसके माध्यम से आप बड़ी छवि को देखते हैं। छोटा फ्रेम अपारदर्शी सामग्री से घिरा हुआ है जो बड़ी छवि के एक हिस्से के अलावा सभी के बारे में आपके विचार को अस्पष्ट करता है। फ्रेम के माध्यम से आप देख सकते हैं कि बड़ी छवि का हिस्सा दृश्य व्यूपोर्ट है। पूरी छवि को एक बार में देखने के लिए आप अपनी फ्रेम (ज़ूम आउट) रखते हुए बड़ी छवि से दूर वापस आ सकते हैं, या आप केवल एक भाग देखने के लिए करीब (ज़ूम इन) स्थानांतरित कर सकते हैं। आप फ्रेम के अभिविन्यास को भी बदल सकते हैं, लेकिन बड़ी छवि का आकार और आकार (लेआउट व्यूपोर्ट) कभी नहीं बदलता है।

मुद्दे का एक बड़ा उपचार के लिए देखें: http://www.quirksmode.org/mobile/viewports2.html

+0

Thx बहुत..मैंने आपके द्वारा दिए गए लिंक से पहले ही जा चुका है और इसमें कोई संदेह नहीं है, यह एक बहुत अच्छा रिफ है .. लेकिन, मुझे उस हिस्से को समझ में नहीं आया जहां वे कहते हैं कि "... ब्राउज़र ने अपने आयामों को चुना है लेआउट व्यूपोर्ट का है कि यह पूरी तरह ज़ूम आउट-आउट मोड में स्क्रीन को पूरी तरह से कवर करता है (और इस प्रकार दृश्य व्यूपोर्ट के बराबर है) .... "। और "... लेआउट व्यूपोर्ट चौड़ाई हमेशा एक ही है।यदि आप अपने फोन को घुमाते हैं, तो दृश्य व्यूपोर्ट बदलता है, लेकिन ब्राउजर थोड़ा ज़ूम करके इस नए अभिविन्यास को अनुकूलित करता है ताकि लेआउट व्यूपोर्ट दृश्य दृश्य के रूप में फिर से चौड़ा हो। – testndtv

+22

लेआउट व्यूपोर्ट की कल्पना एक बड़ी छवि के रूप में करें जो आकार या आकार को परिवर्तित नहीं करती है। अब छवि में आपके पास एक छोटा फ्रेम है जिसके माध्यम से आप बड़ी छवि को देखते हैं। छोटा फ्रेम अपारदर्शी सामग्री से घिरा हुआ है जो बड़ी छवि के एक हिस्से के अलावा सभी के बारे में आपके विचार को अस्पष्ट करता है। फ्रेम के माध्यम से आप देख सकते हैं कि बड़ी छवि का हिस्सा दृश्य व्यूपोर्ट है। पूरी छवि को एक बार में देखने के लिए आप अपनी फ्रेम (ज़ूम आउट) रखते हुए बड़ी छवि से दूर वापस आ सकते हैं, या आप केवल एक भाग देखने के लिए करीब (ज़ूम इन) स्थानांतरित कर सकते हैं। (cont'd) –

+3

(cont'd) आप फ्रेम के अभिविन्यास को भी बदल सकते हैं, लेकिन बड़ी छवि (लेआउट व्यूपोर्ट) का आकार और आकार कभी भी नहीं बदलता है। –

9

दो का एक बहुत अच्छा विवरण पाया जाता है here

सारांश में:

दृश्य व्यूपोर्ट

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

लेआउट व्यूपोर्ट

हालांकि, सीएसएस लेआउट, विशेष रूप से percentual चौड़ाई, लेआउट व्यूपोर्ट, जो दृश्य व्यूपोर्ट की तुलना में काफी व्यापक है के सापेक्ष गणना कर रहे हैं।

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

कैसे विस्तृत लेआउट व्यूपोर्ट है? यह प्रति ब्राउज़र अलग है। सफारी आईफोन 980 पीएक्स, ओपेरा 850 पीएक्स, एंड्रॉइड वेबकिट 800 पीएक्स, और आईई 974 पीएक्स का उपयोग करता है।

संक्षेप में, लेआउट व्यूपोर्ट आम तौर पर व्यूपोर्ट की चौड़ाई जब स्क्रीन सभी तरह ज़ूम आउट किया गया है।

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