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




viewport html5boilerplate (4)

Apple [कुछ हद तक] यहाँ स्पष्ट रूप से व्यवहार here वर्णन करता here

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

Apple प्लेटफ़ॉर्म के अनुरूप ऐप्स के लिए width=device-width सुझाव देता है, इसलिए यह निश्चित रूप से इसे करने का "Apple" तरीका है:

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

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

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

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

HTML5BP के इस हालिया परिवर्तन के बारे में:

" मोबाइल / आईओएस सीएसएस संशोधन "

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

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

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

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

जब initial-scale=1 को शामिल किया गया था, तो ऊर्ध्वाधर से क्षैतिज (iPad / iPhone पर) को घुमाकर लेआउट को 2 कॉलम (उदाहरण के लिए) से 3 कॉलम में बदल दिया गया (meida क्वेरी के कारण, initial-scale=1 और JS के लिए ठीक करें व्यूपोर्ट स्केल बग )।

संक्षेप में , जब लैंडस्केप मोड में, यह पृष्ठ को ज़ोम्ज़ करता है:

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

... और यह नहीं है:

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

नोट: HTML5BP वेबसाइट को iPad / iPhone पर देखने पर आप कार्रवाई में इस ज़ूमिंग प्रभाव को देख सकते हैं।

मेरे सवाल:

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

@robertc: धन्यवाद! यह बहुत मददगार है।

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

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


क्या आपने यह कोशिश की?

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

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

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


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

बचाव के 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; बराबर है width:device-width;

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







html5boilerplate