नवंबर 108 में, Chrome 108 के रिलीज़ होने पर ऑन-स्क्रीन कीबोर्ड (ओएसके) दिखाए जाने पर लेआउट व्यूपोर्ट के काम करने के तरीके में कुछ बदलाव करेगा. इस बदलाव के बाद, Android पर Chrome, लेआउट व्यूपोर्ट का साइज़ नहीं बदलेगा. इसके बजाय, वह सिर्फ़ विज़ुअल व्यूपोर्ट का साइज़ बदलेगा. इससे Android पर Chrome, iOS पर Chrome और iOS पर Safari की तरह काम करेगा.
यहां कुछ जानकारी दी गई है, जिसमें बताया गया है कि क्या बदलाव हो रहा है और Chrome यह बदलाव क्यों कर रहा है. साथ ही, यह भी बताया गया है कि इस बदलाव की तैयारी करने के लिए क्या किया जा सकता है.
लेआउट व्यूपोर्ट और विज़ुअल व्यूपोर्ट
किसी वेबसाइट पर जाने पर, आपको पेज के लोड होने के बाद पूरा कॉन्टेंट नहीं दिखता. इसके बजाय, ब्राउज़र आपको एक व्यूपोर्ट ऑफ़र करता है जिसके ज़रिए आपको पेज का एक हिस्सा देखने को मिलता है. इस व्यूपोर्ट को लेआउट व्यूपोर्ट के रूप में भी जाना जाता है. जब किसी पेज का कॉन्टेंट बहुत बड़ा हो जाता है, तो ब्राउज़र, स्क्रोल करने की सुविधा देता है.
position: fixed का इस्तेमाल करके एलिमेंट की पोज़िशन तय करते समय, ये उस लेआउट व्यूपोर्ट में दिखेंगे. जैसे-जैसे किसी पेज पर नीचे की ओर स्क्रोल किया जाता है, वैसे-वैसे लेआउट व्यूपोर्ट उसी जगह पर रहता है जैसा कि position: fixed का इस्तेमाल करने वाले एलिमेंट करते हैं.
position: fixed (नीले रंग के बॉक्स) का इस्तेमाल करके बनाया गया है. iPhone पर Safari, Android पर Chrome, और Android पर Firefox को दिखाया गया है (बाएं से दाएं).
इस लेआउट व्यूपोर्ट के अलावा, ब्राउज़र में एक विज़ुअल व्यूपोर्ट भी होता है. यह व्यूपोर्ट का वह हिस्सा दिखाता है जो फ़िलहाल दिख रहा है. ज़ूम लेवल 1 पर यह विज़ुअल व्यूपोर्ट, लेआउट व्यूपोर्ट जितना बड़ा होता है.
पिंच-ज़ूम इन करते समय, विज़ुअल व्यूपोर्ट के साइज़ को लेआउट व्यूपोर्ट के मुकाबले छोटा किया जाता है.
व्यूपोर्ट का साइज़ बदलने का व्यवहार
किसी इनपुट या बदलाव करने लायक किसी अन्य जगह पर फ़ोकस करते समय, ज़्यादातर टचस्क्रीन डिवाइस, ऑन-स्क्रीन कीबोर्ड दिखा सकते हैं. इस कीबोर्ड को अक्सर वर्चुअल कीबोर्ड कहा जाता है. इसकी मदद से, उपयोगकर्ता ऐसी जगह पर कॉन्टेंट डाल सकते हैं जिसमें बदलाव किया जा सकता है.
ऐसा करते समय, ब्राउज़र अलग-अलग व्यूपोर्ट के हिसाब से इनमें से किसी एक तरीके से जवाब देते हैं:
- सिर्फ़ विज़ुअल व्यूपोर्ट का साइज़ बदलें और लेआउट व्यूपोर्ट को ऑफ़सेट करें.
- विज़ुअल व्यूपोर्ट और लेआउट व्यूपोर्ट, दोनों का साइज़ बदलें.
- किसी भी लेआउट व्यूपोर्ट या विज़ुअल व्यूपोर्ट का साइज़ न बदलें और दोनों के ऊपर वर्चुअल कीबोर्ड को ओवरले करें.
इन तीन व्यवहारों को इस तरह से देखा जाता है:
विज़िटर द्वारा उपयोग किए जाने वाले ब्राउज़र और OS के संयोजन के आधार पर, उनमें से किसी एक व्यवहार का उपयोग आपके नियंत्रण से बाहर किया जाता है.
साइज़ बदलने के अलग-अलग व्यवहारों को मैप करना
Interop 2022 के व्यूपोर्ट की जांच वाले हिस्से में, हर बड़े ब्राउज़र और ओएस के कॉम्बिनेशन के लिए, व्यूपोर्ट से जुड़े अलग-अलग पहलुओं की जांच की गई.
ओएसके दिखाए जाने पर, टेस्ट किए गए पहलुओं में से एक 'साइज़ बदलें' व्यवहार है. इस वजह से यह कैटगरी तय हुई:
ग्रुप एक
ऐसे ब्राउज़र जो विज़ुअल व्यूपोर्ट का साइज़ बदलते हैं और लेआउट व्यूपोर्ट में कोई बदलाव नहीं करते.
- iOS पर Safari
- iPadOS पर Safari
- Chrome OS पर Chrome
- iOS पर Chrome
- iPadOS पर Chrome
- iOS पर Edge
- iPadOS पर Edge
समूह दो
ऐसे ब्राउज़र जो विज़ुअल व्यूपोर्ट और लेआउट व्यूपोर्ट, दोनों का साइज़ बदल देते हैं.
- Android पर Chrome
- Android पर Firefox
- Android पर Edge
- iOS पर Firefox
समूह तीन
ऐसे ब्राउज़र जो किसी भी व्यूपोर्ट का साइज़ नहीं बदलते:
- डिफ़ॉल्ट रूप से कोई नहीं – Android पर Chrome में, आपके पास Virtualकीबोर्ड API की मदद से, इस तरीके को शामिल करने का विकल्प होता है
हर व्यवहार के खराब असर
ओएसके दिखाए जाने पर अलग-अलग व्यूपोर्ट का साइज़ बदलने के तरीके में इस अंतर की वजह से, वेबसाइटों का लेआउट और साइज़ बदलने वाला मॉडल बनता है.
ग्रुप 1 के ब्राउज़र में, ओएसके दिखाए गए हैं:
- viewport-रिलेटिव यूनिट के लिए कैलकुलेट की गई वैल्यू में कोई बदलाव नहीं होता.
- पूरे विज़ुअल जगह लेने के लिए डिज़ाइन किए गए एलिमेंट, अपना साइज़ बनाए रखते हैं.
position: fixedका इस्तेमाल करने वाले एलिमेंट अपनी जगह पर रहते हैं और ओएसके की मदद से इन्हें छिपाया जा सकता है.
ग्रुप 2 के ब्राउज़र में, ओएसके दिखाए गए हैं:
- viewport-रिलेटिव यूनिट श्रिंक के लिए कैलकुलेट की गई वैल्यू.
- ऐसे एलिमेंट जिन्हें पूरी तरह से विज़ुअल स्पेस छोटा करने के लिए डिज़ाइन किया गया था.
position: fixedका इस्तेमाल करने वाले एलिमेंट, लेआउट में कहीं और दिख सकते हैं.
position: fixed (नीले रंग के बॉक्स) का इस्तेमाल करने वाले एलिमेंट की अलग-अलग पोज़िशन पर ध्यान दें. iOS पर Safari (बाएं) और Android पर Chrome (बीच में और दाएं) दिखाया गया है.
जब तक उपयोगकर्ता-एजेंट स्निफ़िंग का इस्तेमाल नहीं किया जाता या ज़्यादा स्क्रिप्टिंग का इस्तेमाल नहीं किया जाता, तब तक आपको यह पता नहीं चल सकता कि किस बिहेवियर का इस्तेमाल किया गया है. इस व्यवहार को नहीं बदला भी जा सकता. ऐसा इसलिए, क्योंकि यह उस ब्राउज़र और ओएस कॉम्बिनेशन से तय होता है जिससे उपयोगकर्ता विज़िट कर रहा है.
Chrome 108 में, डिफ़ॉल्ट ऐक्शन को बदलना
Chrome 108 से, Android पर Chrome अपने व्यूपोर्ट का साइज़ बदलने के तरीके में बदलाव करेगा, ताकि ऑन-स्क्रीन कीबोर्ड दिखने पर लेआउट व्यूपोर्ट का साइज़ न बदले.
इससे iOS पर Chrome, iPadOS, Windows, और CrOS डिवाइसों पर Chrome के व्यवहार को अलाइन किया जाएगा. साथ ही, iOS और iPadOS पर Safari और iOS, iPadOS, और Windows पर Edge भी सही रहेगा.
इस बदलाव की वजह से, लेखक यह जान सकते हैं कि किस व्यवहार का इस्तेमाल किया जाएगा. इससे कोई फ़र्क़ नहीं पड़ता कि Chrome किस ओएस पर चल रहा है. इसके अलावा, यह व्यूपोर्ट से जुड़ी एक जैसी यूनिट की अनुमति देता है: ओएसके को दिखाने या छिपाने से इन यूनिट पर कोई असर नहीं पड़ता है.
पर कोई असर नहीं पड़ेगाकिसी अलग व्यवहार के लिए ऑप्ट इन करना
अगर आपको अपनी वेबसाइट में प्री-108 साइज़ बदलने वाला तरीका इस्तेमाल करना है, तो डरें नहीं. साथ ही, Chrome 108 में शिपिंग करना viewport मेटा टैग का एक्सटेंशन है.
interactive-widget कुंजी के ज़रिए, Chrome को बताया जा सकता है कि आपको साइज़ बदलने के लिए कौनसा तरीका पसंद है.
interactive-widget के लिए ये वैल्यू स्वीकार की जाती हैं:
resizes-visual: सिर्फ़ विज़ुअल व्यूपोर्ट का साइज़ बदलें, लेआउट व्यूपोर्ट का नहीं.resizes-content: विज़ुअल व्यूपोर्ट और लेआउट व्यूपोर्ट, दोनों का साइज़ बदलें.overlays-content: किसी भी व्यूपोर्ट का साइज़ न बदलें.
Android पर Chrome के “पुराने” व्यवहार में वापस ऑप्ट इन करने के लिए, व्यूपोर्ट मेटा टैग को इस पर सेट करें:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
अगर व्यूपोर्ट मेटा टैग में interactive-widget को शामिल नहीं किया जाता है, तो Chrome डिफ़ॉल्ट तरीका इस्तेमाल करेगा. जैसे, resizes-visual.
विज़ुअलाइज़ किया गया, सेटिंग का यह असर अलग-अलग व्यूपोर्ट पर पड़ता है:
resizes-visual, resizes-content, और overlays-content.
अपने ब्राउज़र में हर वैल्यू का असर देखने के लिए, इस डेमो वेबसाइट पर जाएं.
जांच और सुझाव/शिकायत/राय
हमें उम्मीद है कि मौजूदा साइटों में मामूली अंतर आ सकता है. हालांकि, हम उम्मीद करते हैं कि ये साइटें ब्लॉक नहीं होंगी, क्योंकि Android पर Chrome 108 अब iOS पर Safari की तरह ही काम करेगा. इसलिए, iOS पर Safari के साथ ठीक से काम करने वाली वेबसाइटें, Android पर Chrome 108 पर भी ठीक से काम करेंगी.
हालांकि, हम वेबसाइट के लेखकों को Chrome 108 में अपनी वेबसाइटों की जांच करने के लिए बढ़ावा देते हैं. यह वर्शन 27 अक्टूबर, 2022 से बीटा वर्शन में उपलब्ध है. खास तौर पर, ऐसे एलिमेंट ढूंढें जो position: fixed का इस्तेमाल करते हैं और/या व्यूपोर्ट-रिलेटिव यूनिट का इस्तेमाल करते हैं.
आपकी राय, crbug.com पर जाकर भेजी जा सकती है. रिपोर्ट के टाइटल में “ऑन-स्क्रीन कीबोर्ड” ज़रूर शामिल करें.