एचटीएमएल 5 बॉयलरप्लेट: मेटा व्यूपोर्ट और चौड़ाई = डिवाइस-चौड़ाई

Question

मैं एक अनुकूली/उत्तरदायी वेबसाइट बना रहा हूं।

"mobile/iOS css revisions"

मैं का उपयोग शुरू किया:

HTML5BP को यह हाल ही में परिवर्तन के बारे में

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

... और मैं अपने सीएसएस में यह है:

html { 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
} 

जब initial-scale=1 वर्टिक से घूर्णन किया गया था, क्षैतिज (आईपैड/आईफोन पर) ने 2 कॉलम (उदाहरण के लिए) से 3 कॉलम (मेडा प्रश्नों के कारण, initial-scale=1 और JS fix for viewport scale bug) से लेआउट को बदलने का कारण बना दिया।

, संक्षेप में जब लैंडस्केप मोड में, यह पेज ज़ूम:

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

... और इस कार्य नहीं करता:

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

नोट: आप यह देख सकते आईपैड/आईफोन पर HTML5BP website को देखते समय कार्रवाई में ज़ूमिंग प्रभाव।

मेरे सवालों का:

1. इस नए मानक बनने जाता है (यानी ज़ूम जब लैंडस्केप मोड में)?
2. मुझे अपने सहकर्मियों और मालिकों के लिए इस परिवर्तन को समझाते हुए एक समय का एक बिल्ली है ... वे क्षैतिज मोड में एक अलग लेआउट देखने के लिए उपयोग किया जाता है; अब जब पेज ज़ूम करता है और लेआउट वही रहता है (इसे छोड़कर बड़ा)। अज्ञानी जनता को यह कैसे समझाया जाए इस पर कोई सुझाव (जिसमें से, मुझे शामिल किया जा सकता है)?

---

@robertc: धन्यवाद! यह बहुत उपयोगी है।

मुझे वास्तव में initial-scale=1 नहीं है; यह मेरे सहकर्मी हैं जिनका उपयोग ज़ूम के बजाय लेआउट परिवर्तन को देखने के लिए किया जाता है। मुझे यकीन है कि मैं को initial-scale=1 जोड़ने के लिए मजबूर कर सकता हूं ताकि सभी को खुश कर सकें (क्योंकि ज़ूमिंग और लेआउट परिवर्तन को देखकर, उन्हें देखने के लिए उपयोग किया जाता है)।

मैंने अभी देखा है कि HTML5BP index.html on github, और the website, <meta name="viewport" content="width=device-width"> का उपयोग कर रहा था; मेरे लिए, यह initial-scale=1 को कुचलने के लिए पर्याप्त कारण है, लेकिन जब मैं these things को "गैर-गीक्स" में समझाता हूं तो मुझे भौहें उठाती हैं। : डी

Answer 1

यह एक नया मानक नहीं है, इस तरह यह हमेशा AFAIK काम करता है। यदि आप चौड़ाई को निश्चित पिक्सल पर सेट करते हैं, तो पोर्ट्रेट को लैंडस्केप में घूर्णन करना केवल स्केल को बदलता है, क्योंकि वर्चुअल पिक्सेल की संख्या स्थिर बनी हुई है। मुझे लगता है कि initial-scale=1 जोड़कर स्केलिंग को अवरुद्ध कर रहा है जैसे आप स्विच करते हैं - यह आपके पृष्ठ का स्केलिंग कारक बदलता नहीं है क्योंकि डिवाइस घुमाया जाता है।पृष्ठ क्या दिखता है यदि आप इसे चित्र के बजाय प्रारंभ में परिदृश्य में लोड करते हैं?

मैं सुझाव दूंगा कि यदि आप initial-scale=1 निर्दिष्ट करते समय व्यवहार प्राप्त करते हैं, तो initial-scale=1 निर्दिष्ट करें। एचटीएमएल 5 बॉयलरप्लेट कुछ ऐसी चीज है जो आप अपनी आवश्यकताओं के अनुसार संशोधित करने के लिए मानते हैं।

Answer 2

ऐप्पल [कुछ हद तक] स्पष्ट रूप से व्यूपोर्ट व्यवहार here का वर्णन करता है।

आईओएस उपकरणों में मुख्य रूप से, डिवाइस-चौड़ाई और डिवाइस-ऊंचाई पोर्ट्रेट मोड में स्क्रीन आयामों को संदर्भित करता है। यदि आप व्यूपोर्ट चौड़ाई को डिवाइस-चौड़ाई पर सेट करते हैं, तो यह निरंतर मान पर सेट करने जैसा ही है। इसलिए, जब स्क्रीन की भौतिक चौड़ाई किसी पहलू परिवर्तन के साथ बदलती है, तो ब्राउज़र स्थिर आकार को लेता है जिसे आपने लैंडस्केप मोड में स्क्रीन की चौड़ाई में दर्ज किया है। यह व्यवहार न तो गलत है और न ही सही है, यह बस है।

एप्पल मंच के अनुरूप क्षुधा के लिए width=device-width पता चलता है, तो यह निश्चित रूप से यह कर की "एप्पल" तरीका है:

आप एक वेब अनुप्रयोग विशेष रूप से iOS के लिए, के लिए तो आकार की सिफारिश की डिजाइनिंग रहे हैं आपके वेबपृष्ठ आईओएस पर दृश्य क्षेत्र का आकार है। ऐप्पल अनुशंसा करता है कि आप चौड़ाई को डिवाइस-चौड़ाई पर सेट करें ताकि पोर्ट पोर्ट्रेट अभिविन्यास में स्केल 1.0 है और व्यूपोर्ट आकार बदलता है जब उपयोगकर्ता लैंडस्केप ओरिएंटेशन में बदल जाता है। [यानी। व्यूपोर्ट चित्र डिवाइस चौड़ाई को बरकरार रखे हुए है, लेकिन छोटा या प्रस्तुति के लिए खींची जाती है परिदृश्य चौड़ाई]

निजी तौर पर फिट करने के लिए, मैं, कोई निरपेक्ष उपकरण-चौड़ाई सेटिंग दृष्टिकोण के साथ प्रारंभिक-पैमाना = 1.0 पसंद करते हैं क्योंकि यह व्यूपोर्ट बनाता है हमेशा खींचने के बिना डिवाइस स्क्रीन भरें। ऐप्पल इस मान्य मार्कअप को भी मानता है:

चित्र 3-14 उसी वेबपृष्ठ को दिखाता है जब प्रारंभिक स्केल आईफोन पर 1.0 पर सेट होता है। आईओएस पर सफारी दृश्य क्षेत्र में वेबपृष्ठ फिट करने के लिए चौड़ाई और ऊंचाई का अनुमान लगाता है। व्यूपोर्ट चौड़ाई पोर्ट्रेट अभिविन्यास और डिवाइस-ऊंचाई में लैंडस्केप ओरिएंटेशन में डिवाइस-चौड़ाई पर सेट की गई है।

Answer 3

मुझे सबसे विस्तृत और सहायक Mozilla's viewport explanation मिला। यहां एक अंश दिया गया है:

चौड़ाई संपत्ति व्यूपोर्ट के आकार को नियंत्रित करती है। इसे width=600 जैसे विशिष्ट पिक्सेल पर सेट किया जा सकता है या विशेष मूल्य डिवाइस-चौड़ाई मान पर जो 100% के पैमाने पर सीएसएस पिक्सेल में स्क्रीन की चौड़ाई है। (वहाँ height और device-height मूल्यों, जो तत्वों कि व्यूपोर्ट ऊंचाई के आधार पर आकार या स्थिति को बदलने के साथ पृष्ठों के लिए उपयोगी हो सकता है इसी कर रहे हैं।)

initial-scale संपत्ति ज़ूम स्तर जब पेज पहले भरी हुई है नियंत्रित करता है। maximum-scale, minimum-scale, और user-scalable गुण को नियंत्रित कैसे उन में या बाहर

Answer 4

पेज ज़ूम करने के लिए एक छोटे से अद्यतन को जोड़ने के लिए अनुमति दी जाती है: यह अभी भी मसौदा रूप में है, लेकिन यह निश्चित रूप से कुछ की जांच के लिए है। आईई 10 समर्थन के लिए एक prefixed संस्करण भी है।एचटीएमएल के बजाय सीएसएस का उपयोग करके यह भ्रम आप zoom:1; करने के लिए initial-scale:1; लागू करने और width के लिए min/max विकल्प देकर, height द्वारा पर बोल रहे, & zoom जो furter बढ़ जाती है समायोजन की सीमा यह आवश्यक होना चाहिए का एक बहुत ऊपर साफ करता है।

extend-to-zoom बचाव के लिए! (http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)

<meta name="viewport" content="initial-scale=1.0"> अनुवाद और नरक में अनुवाद;

@viewport{ 
    zoom: 1.0; 
    width: extend-to-zoom; 
} 
@-ms-viewport{ 
    width: extend-to-zoom; 
    zoom: 1.0; 
} 

जहां <meta name="viewport" content="width:device-width,initial-scale=1.0"> अनुवाद और नरक में अनुवाद करता है;

@viewport{ 
    zoom: 1.0; 
    width: device-width; /* = 100vw */ 
} 
@-ms-viewport{ 
    width: device-width; 
    zoom: 1.0; 
} 

नोट: width:extend-to-zoom 100%; आप इस प्रयास किया width:device-width;

http://dev.w3.org/csswg/css-device-adapt/

Answer 5

के बराबर है? एक

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