व्यूपोर्ट मेटा टैग से "चौड़ाई = डिवाइस-चौड़ाई" को हटाने के साइड इफेक्ट्स जब "प्रारंभिक-स्केल = 1.0" भी सेट होते हैं

Question

जबकि <meta name="viewport"> टैग अनियंत्रित है, यह "अधिकांश मोबाइल ब्राउज़रों द्वारा वास्तविक-वास्तविक प्रभुत्व के कारण सम्मानित किया जाता है।"

इसका एक उल्टा एक सच्चा वेब मानक नहीं है विस्तृत प्रलेखन अन्य मानकों के रूप में उपलब्ध नहीं है। सीएसएस कार्य समूह ताकि है क्या मैं मुख्य रूप से एक आधिकारिक काम के रूप में उपयोग कर रहा हूँ, इस के लिए एक विनिर्देश है।

मेरा मुख्य प्रश्न है:

निम्नलिखित घोषणाओं के बीच कथित अंतर क्या होगा?

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

<meta name="viewport" content="initial-scale=1.0">

वैकल्पिक रूप से पूछा गया कि इन दो @ सीवीएसपोर्ट सीएसएस के नियमों में क्या अंतर हैं:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

---

मैं उन पर कैसे पहुँचा @viewport अनुवादों :

width=device-width सेवा min-width: extend-to-zoom; max-width: 100vw;

सीएसएस डिवाइस अनुकूलन मॉड्यूल स्तर 1 दस्तावेज़ कहता है:

widthऔर heightव्यूपोर्ट <META>गुण में अनुवाद किया widthऔर heightवर्णनकर्ता, की स्थापना min-width/ min-heightकरने के लिए मूल्य extend-to-zoomऔर max-width/ max-heightव्यूपोर्ट से लंबाई के लिए मूल्य।

वे इसके अलावा एक उदाहरण देते हैं :

यह <META>तत्व:

<meta name="viewport" content="width=500, height=600">

में अनुवाद:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

widthआशुलिपि वर्णनकर्ता के रूप में वर्णित है:

यह दोनों min-widthऔर सेट करने के लिए एक शॉर्टहैंड डिस्क्रिप्टर है max-width। एक <viewport-length>मान दोनों को min-widthऔर max-widthउस मान को सेट करेगा । दो <viewport-length>मान min-widthपहले और max-widthदूसरे पर सेट होंगे ।

तो यह उस कारण के लिए खड़ा है जो width: extend-to-zoom 500px;इसके बराबर है min-width: extend-to-zoom; max-width: 500px;।

वह केवल 100vwभाग छोड़ता है । खंड 10.4 के भीतर , वे बताते हैं:

device-widthऔर device-heightक्रमशः 100vw और 100vh में अनुवाद करें

इसलिए हम अंत में देख सकते हैं कि कैसे width=device-widthअनुवाद किया जाता है min-width: extend-to-zoom; max-width: 100vw;।

initial-scale=1.0 सेवा zoom: 1.0; width: extend-to-zoom;

यह एक शब्दशः उदाहरण है :

यह <META>तत्व:

<meta name="viewport" content="initial-scale=1.0">

में अनुवाद:

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

---

मेरे पास दूसरा प्रश्न यह है कि वास्तव में extend-to-zoomमूल्य क्या है ?

इस पर प्रलेखन और इसकी रिज़ॉल्यूशन प्रक्रिया को समझ पाना मुश्किल है। अगर कोई मुझे इस पर कुछ और उदाहरणों की ओर इशारा कर सकता है जो बहुत सराहा जाएगा।

---

उपरोक्त सब कुछ के अलावा, मैंने कुछ व्यूपोर्ट कॉन्फ़िगरेशन का परीक्षण करने के लिए एक त्वरित साइट - https://romellem.github.io/temp-site/viewport/ को एक साथ रखा है।

अर्थात्:

• सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1.0"
• सामग्री = "प्रारंभिक-पैमाना = 1.0"

यह परीक्षण में मदद कर सकता है।

Answer 1

इससे पहले कि आप जो पूछ रहे हैं, उस पर ध्यान दें, आइए इस बारे में थोड़ा समीक्षा करें कि viewportमेटा टैग पहले स्थान पर क्यों है। यहां मैं इकट्ठा हूं।

---

हमें viewportटैग की आवश्यकता क्यों है ?

व्यूपोर्ट एक ऐसा क्षेत्र है जहां वेब सामग्री देखी जा सकती है। आमतौर पर, प्रस्तुत पृष्ठ (वेब सामग्री) व्यूपोर्ट से बड़ा है। परिणामस्वरूप, हम आम तौर पर छिपी हुई सामग्री को देखने के लिए स्क्रॉलबार का उपयोग करते हैं (क्योंकि व्यूपोर्ट सब कुछ प्रदर्शित नहीं कर सकता है)। CSS डिवाइस अनुकूलन मॉड्यूल स्तर 1 से उद्धृत :

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

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

तो .... हमें इस viewportटैग की आवश्यकता क्यों है ? खैर, आजकल हमारे पास मीडिया के प्रश्न हैं जो हमें मोबाइल उपकरणों के लिए डिज़ाइन करने की अनुमति देता है। हालाँकि, यह मीडिया क्वेरी वास्तविक व्यूपोर्ट की चौड़ाई पर निर्भर करता है । मोबाइल उपकरणों में, उपयोगकर्ता एजेंट स्वचालित रूप से प्रारंभिक व्यूपोर्ट आकार को एक अलग निश्चित (आमतौर पर प्रारंभिक व्यूपोर्ट आकार से बड़ा) की शैली देता है। इसलिए यदि किसी मोबाइल डिवाइस के व्यूपोर्ट की चौड़ाई तय की जाती है, तो मीडिया के प्रश्नों में हमारे द्वारा उपयोग किए जाने वाले CSS नियमों को केवल इसलिए निष्पादित नहीं किया जाएगा क्योंकि व्यूपोर्ट की चौड़ाई कभी नहीं बदलती है। का प्रयोग viewportटैग, हम कर सकते हैं को नियंत्रित वास्तविक व्यूपोर्ट की चौड़ाई (UA द्वारा स्टाइल किए जाने के बाद)। MDN से उद्धृत :

हालाँकि, यह तंत्र मीडिया के प्रश्नों का उपयोग करते हुए संकीर्ण स्क्रीन के लिए अनुकूलित पृष्ठों के लिए इतना अच्छा नहीं है - यदि वर्चुअल व्यूपोर्ट उदाहरण के लिए 980px है, तो मीडिया क्वेरीज़ जो 640px या 480px या उससे कम समय में कभी भी उपयोग नहीं की जाएगी, इस तरह की प्रभावशीलता को सीमित करती है उत्तरदायी डिजाइन तकनीक।

ध्यान दें कि viewportटैग वास्तविक व्यूपोर्ट की ऊंचाई भी बदल सकता है, न कि केवल चौड़ाई

---

viewport टैग की width

widthएक में viewportटैग करने के लिए अनुवाद किया है max-widthमें @viewportनियम। जब आप widthजैसा घोषित करते हैं device-width, यह नियम 100%में अनुवादित होता है @viewport। व्यूपोर्ट के आधार पर प्रतिशत मूल्य का समाधान किया जाता है initial-width। इसलिए यदि हम अभी भी उपरोक्त उदाहरण का उपयोग कर रहे हैं, तो max-widthमान का समाधान होगा 640px। जैसा कि आपको पता चला है, यह केवल निर्दिष्ट करता है max-width। min-widthस्वचालित रूप से किया जाएगा extend-to-zoom।

---

extend-to-zoom

आपका प्रश्न था कि वास्तव में विस्तार-टू-ज़ूम का मूल्य क्या है ? मैंने जो इकट्ठा किया है, वह वह मान है जिसका उपयोग व्यूपोर्ट को एक ज़ूम स्तर पर देखने के क्षेत्र में फिट करने के लिए विस्तार करने के लिए किया जाता है। दूसरे शब्दों में, यह एक व्यूपोर्ट आकार मान है जो निर्दिष्ट ज़ूमिंग मूल्य के आधार पर बदलता है। एक उदाहरण? यह देखते हुए कि max-zoomयूए स्टाइलशीट का मूल्य है 5.0और initial-widthहै 320px, <meta name="viewport" content="width=10">प्रारंभिक वास्तविक चौड़ाई का समाधान करेगा 64px। यह समझ में आता है क्योंकि अगर एक डिवाइस में केवल 320px है और केवल 5xसामान्य मूल्य को ज़ूम किया जा सकता है , तो न्यूनतम व्यूपोर्ट का आकार होगा 320px divided by 5, जिसका अर्थ है कि एक समय में केवल 64px दिखाना ( और नहीं 10pxक्योंकि वह 32x जूमिंग की आवश्यकता होगी!)। यह मान एल्गोरिथ्म द्वारा उपयोग किया जाएगा निर्धारित करने के लिए कैसे विस्तार करने के लिए (बदलें) min-widthऔर max-widthमूल्यों, जो वास्तविक व्यूपोर्ट चौड़ाई निर्धारित करने में एक भूमिका निभाएगा।

---

यह सब एक साथ डालें

तो अनिवार्य रूप से, के बीच क्या फर्क है <meta name="viewport" content="width=device-width, initial-scale=1.0">और <meta name="viewport" content="initial-scale=1.0">? बस एल्गोरिथ्म के चरणों को फिर से करें ( यह और यह )। चलो widthपहले ( विशेषता के बिना एक ) करते हैं। (हम मान लेंगे कि initial-widthव्यूपोर्ट का है 640px)

• widthसेट नहीं है, में इस परिणाम max-widthऔर min-widthकिया जा रहा है extend-to-zoomमें @viewportनियम।
• initial-scaleहै 1.0। इसका मतलब है कि zoomमूल्य भी है1.0
• आइए संकल्प करेंextend-to-zoom । कदम:
  1. extend-zoom = MIN(zoom, max-zoom)। MINआपरेशन मूल्य है कि गैर है पर ले कर जाता auto। यहाँ, zoomहै 1.0और max-zoomहै auto। इस का मतलब है किextend-zoom है1.0
  2. extend-width = initial-width / extend-zoom। यह आसान है; 640 को विभाजित करके 1. आपको मिलता extend-widthहै640
  3. क्योंकि extend-zoomगैर है-auto , हम दूसरी शर्त पर छोड़ेंगे। max-widthवास्तव में extend-to-zoom, इसका मतलब यह है कि max-widthइसे सेट किया जाएगा extend-width। इस प्रकार,max-width = 640
  4. min-width भी है extend-to-zoom , इसका मतलब है कि सेटिंग min-widthकरना max-width। हमें मिलाmin-width = 640
• गैर-auto (यानी extend-to-zoom) मूल्यों के समाधान के बाद max-widthऔर min-width। हम अगली प्रक्रिया के लिए आगे बढ़ सकते हैं । क्योंकि min-widthया max-widthनहीं हैauto , हम पहले का उपयोग करेगा ifप्रक्रिया में है, इस प्रकार प्रारंभिक वास्तविक व्यूपोर्ट स्थापित करने widthके लिए MAX(min-width, MIN(max-width, initial-width))है, जो के बराबर है MAX(640, MIN(640, 640))। यह करने के लिए हल करता है640 आपके प्रारंभिक वास्तविक व्यूपोर्ट के लिएwidth
• अगली प्रक्रिया के लिए आगे बढ़ रहा है । इस चरण में, widthनहीं है auto। मान नहीं बदला गया है और हम वास्तविक व्यूपोर्ट widthके साथ समाप्त होते हैं640px

चलो पूर्व करते हैं।

• widthमें सेट किया गया है, इस परिणाम max-widthजा रहा है 100%(640px हमारे मामले में) और min-widthकिया जा रहा है extend-to-zoomमें@viewport नियम।
• initial-scaleहै 1.0। इसका मतलब है किzoomमूल्य भी है1.0
• आइए संकल्प करेंextend-to-zoom । आप चरणों ध्यान से (लगभग ऊपर के रूप में ही) का पालन करें, तो आप एक साथ खत्म हो जाएगा max-widthकी 640pxऔर एकmin-width की640px ।
• आप शायद अब पैटर्न देख सकते हैं। हमें वास्तविक व्यूपोर्ट चौड़ाई मिलेगी640px ।

तो कथित अंतर क्या है? अनिवार्य रूप से कोई नहीं । दोनों एक ही काम करते हैं। आशा है कि मेरी व्याख्या से मदद मिलती है ;-) अगर कुछ भी हो, तो मुझे बताएं।

Comments

यह बहुत अच्छा है और मैं जो चाह रहा था उसके अनुरूप है। मैं इसे उत्तर के रूप में चिह्नित करूंगा लेकिन जब आप मतभेद पा सकते हैं तो मुझे कुछ स्पष्टीकरण पसंद आएगा । ऐसा लगता है कि मुख्य अंतर होगा यदि आपके पास कुछ छोटी सामग्री की प्रारंभिक सामग्री है और एक प्रारंभिक ज़ूम सेट नहीं है 1.0, लेकिन मैं इस पर अनिश्चित हूं। वैसे भी, महान जवाब, धन्यवाद!

— रोमेल्म

@romellem हां, viewportटैग विशेषता निर्दिष्ट करते समय आप उन कथित तरीकों में से एक पा सकते हैं जब आप निर्दिष्ट नहीं करते हैं initial-scale। उदाहरण के लिए, जब आप लिखते हैं <meta name="viewport" content="360px">, तो आप जानते हैं कि आप प्रारंभिक ज़ूम स्तर को नियंत्रित नहीं कर रहे हैं। जैसे, मेरे सीमित परीक्षण से, यूए शैली हमेशा सिकुड़ती है (कुछ प्रक्रिया के माध्यम से जो कि आदर्श नहीं हो सकती है) व्यूपोर्ट। हालांकि, वास्तविक व्यूपोर्ट हमेशा की चौड़ाई की 360pxपरवाह किए बिना रहेगा , चाहे इंटेलीजेंट व्यूपोर्ट का आकार कितना भी हो।

— रिचर्ड

@romellem निरंतरता । हालांकि, जब आप लिखते हैं <meta name="viewport" content="360px", initial-scale=1.0>, तो आप कर रहे हैं min-widthकरने के लिए extend-to-zoomऔर एक साथ मिलकर zoomमूल्य, यह हमेशा प्रारंभिक व्यूपोर्ट चौड़ाई ज़ूम मान और से विभाजित के बीच सबसे बड़ा मान हो जाएगी max-width। विवश प्रक्रिया (खंड 7.2) में, आप देखेंगे कि द width = MAX(min-width, MIN(max-width, initial-width))। मेरे सीमित परीक्षण से, मेरा अनुमान यह है कि जब max-widthनिर्दिष्ट की तुलना में छोटा है ...

— रिचर्ड

@romellem निरंतरता । ... वास्तविक व्यूपोर्ट चौड़ाई, यह हमेशा प्रारंभिक व्यूपोर्ट चौड़ाई का समाधान करेगी। हालांकि, जब max-widthमूल्य प्रारंभिक व्यूपोर्ट चौड़ाई से बड़ा होता है, तो न्यूनतम मूल्य प्रारंभिक व्यूपोर्ट चौड़ाई और अधिकतम मूल्य होगा, अच्छी तरह से, max-widthमूल्य। extend-to-zoomशब्दार्थ समझ में आता है क्योंकि extend-to-zoomपर min-widthसचमुच व्यूपोर्ट चौड़ाई के मूल्य है, जब जूम फैली 1.0। और यह ऊपर दिए गए उत्तर के साथ संरेखित करता है, जो ज़ूम स्तर पर दिए गए मूल्य कोextend-to-zoom बदल / बढ़ा / बढ़ा देता है। width

— रिचर्ड

@romellem बेशक, यह केवल initial-scaleविशेषता को नियंत्रित करने तक सीमित नहीं है , लेकिन यह कथित अंतर पैदा करने के तरीकों में से एक है। मेरी पहली टिप्पणी में संशोधन, यूए शैली डिवाइस की चौड़ाई 360px से बड़ा होने पर व्यूपोर्ट को ज़ूम-इन (न केवल सिकोड़ें) कर सकती है।

— रिचर्ड