नवंबर में, Chrome 108 के रिलीज़ होने के बाद, Chrome में कुछ बदलाव किए जाएंगे. इन बदलावों के बाद, ऑन-स्क्रीन कीबोर्ड (ओएसके) दिखने पर, लेआउट व्यूपोर्ट के काम करने के तरीके में बदलाव होगा. इस बदलाव के बाद, Android पर Chrome अब लेआउट व्यूपोर्ट का साइज़ नहीं बदलेगा. इसके बजाय, वह सिर्फ़ विज़ुअल व्यूपोर्ट का साइज़ बदलेगा. इससे, Android पर Chrome के काम करने का तरीका, iOS पर Chrome और iOS पर Safari के काम करने के तरीके के बराबर हो जाएगा.
यहां इस बारे में बताया गया है कि क्या हो रहा है, Chrome यह बदलाव क्यों कर रहा है, और इसके लिए आपको क्या करना चाहिए.
लेआउट व्यूपोर्ट और विज़ुअल व्यूपोर्ट
किसी वेबसाइट पर जाने पर, पेज लोड होने के बाद भी आपको उसका पूरा कॉन्टेंट नहीं दिखता. इसके बजाय, ब्राउज़र आपको एक व्यूपोर्ट देता है, जिससे आपको पेज का एक हिस्सा दिखता है. इस व्यूपोर्ट को लेआउट व्यूपोर्ट भी कहा जाता है. जब किसी पेज का कॉन्टेंट बहुत बड़ा हो जाता है, तो ब्राउज़र स्क्रोलिंग की सुविधा देता है.
position: fixed का इस्तेमाल करके एलिमेंट की पोज़िशन तय करने पर, उन्हें उस लेआउट व्यूपोर्ट के हिसाब से लेआउट किया जाएगा. पेज को नीचे की ओर स्क्रोल करने पर, लेआउट व्यूपोर्ट अपनी जगह पर बना रहता है. इसलिए, position: fixed का इस्तेमाल करने वाले एलिमेंट भी अपनी जगह पर बने रहेंगे.
position: fixed (नीले बॉक्स) का इस्तेमाल करके लेआउट किया जाता है. बाईं से दाईं ओर, iPhone पर Safari, Android पर Chrome, और Android पर Firefox दिखाया गया है.
इस लेआउट व्यूपोर्ट के अलावा, ब्राउज़र में विज़ुअल व्यूपोर्ट भी उपलब्ध होता है. यह व्यूपोर्ट के उस हिस्से को दिखाता है जो फ़िलहाल दिख रहा है. ज़ूम लेवल 1 पर, यह विज़ुअल व्यूपोर्ट उतना ही बड़ा होता है जितना लेआउट व्यूपोर्ट.
पिंच करके ज़ूम इन करने पर, लेआउट व्यूपोर्ट के हिसाब से विज़ुअल व्यूपोर्ट का साइज़ छोटा हो जाता है.
व्यूपोर्ट का साइज़ बदलने का तरीका
किसी इनपुट या बदलाव किए जा सकने वाले किसी अन्य हिस्से पर फ़ोकस करने पर, डिवाइसों पर ऑन-स्क्रीन कीबोर्ड दिख सकता है. आम तौर पर, यह सुविधा टचस्क्रीन डिवाइसों पर ही दिखती है. इस कीबोर्ड को अक्सर वर्चुअल कीबोर्ड कहा जाता है. इसकी मदद से, उपयोगकर्ता बदलाव किए जा सकने वाले एरिया में कॉन्टेंट डाल सकते हैं.
ऐसा करने पर, ब्राउज़र अलग-अलग व्यूपोर्ट के हिसाब से इनमें से किसी एक तरीके से जवाब देते हैं:
- सिर्फ़ विज़ुअल व्यूपोर्ट का साइज़ बदलें और लेआउट व्यूपोर्ट को ऑफ़सेट करें.
- विज़ुअल व्यूपोर्ट और लेआउट व्यूपोर्ट, दोनों का साइज़ बदलें.
- लेआउट व्यूपोर्ट या विज़ुअल व्यूपोर्ट, दोनों का साइज़ न बदलें. साथ ही, दोनों के ऊपर वर्चुअल कीबोर्ड ओवरले न करें.
इन तीन व्यवहारों को इस तरह से विज़ुअलाइज़ किया जाता है:
वेबसाइट पर आने वाले व्यक्ति के ब्राउज़र और ओएस के कॉम्बिनेशन के आधार पर, आपके कंट्रोल से बाहर किसी एक व्यवहार का इस्तेमाल किया जाता है.
साइज़ बदलने के अलग-अलग तरीकों को मैप करना
इंटरऑप 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 में, VirtualKeyboard API की मदद से इस सुविधा के लिए ऑप्ट-इन किया जा सकता है
हर व्यवहार के दुष्प्रभाव
ओएसके दिखाए जाने पर, अलग-अलग व्यूपोर्ट के साइज़ में होने वाले बदलाव के तरीके में अंतर की वजह से, वेबसाइटों के लेआउट और साइज़ में अंतर दिखता है.
ग्रुप 1 के ब्राउज़र में, OSK के साथ:
- विंडो स्क्रीन के हिसाब से यूनिट के लिए, कैलकुलेट की गई वैल्यू में कोई बदलाव नहीं होता.
- ऐसे एलिमेंट जिनका साइज़ विज़ुअल के पूरे स्पेस के हिसाब से तय किया गया है उनका साइज़ नहीं बदलता.
position: fixedका इस्तेमाल करने वाले एलिमेंट अपनी जगह पर बने रहते हैं और ओएसके (ऑन-स्क्रीन कीबोर्ड) से छिपे जा सकते हैं.
ग्रुप 2 के ब्राउज़र में, OSK के साथ:
- विंडो स्क्रीन के हिसाब से यूनिट के लिए, कैलकुलेट की गई वैल्यू छोटी हो जाती हैं.
- ऐसे एलिमेंट जो पूरे विज़ुअल स्पेस को कवर करने के लिए डिज़ाइन किए गए थे, छोटे हो जाते हैं.
position: fixedका इस्तेमाल करने वाले एलिमेंट, लेआउट में कहीं भी दिख सकते हैं.
position: fixed (नीले बॉक्स) का इस्तेमाल करने वाले एलिमेंट की अलग-अलग पोज़िशन पर ध्यान दें. इस इमेज में, iOS पर Safari (बाईं ओर) और Android पर Chrome (बीच और दाईं ओर) दिखाया गया है.
User-Agent स्निफ़िंग या ज़्यादा स्क्रिप्टिंग का इस्तेमाल किए बिना, यह पता नहीं लगाया जा सकता कि किस तरह के व्यवहार का इस्तेमाल किया गया है. इस व्यवहार को भी नहीं बदला जा सकता, क्योंकि यह उपयोगकर्ता के ब्राउज़र और ओएस के कॉम्बिनेशन से तय होता है.
Chrome 108 में, डिफ़ॉल्ट तरीके में बदलाव करना
Chrome 108 से, Android पर Chrome अपने व्यूपोर्ट के साइज़ में बदलाव करने के तरीके में बदलाव करेगा. इससे, ऑन-स्क्रीन कीबोर्ड दिखने पर, लेआउट व्यूपोर्ट का साइज़ नहीं बदलेगा.
इससे, Android पर Chrome के काम करने के तरीके को iOS, iPadOS, Windows, और CrOS पर Chrome के काम करने के तरीके के साथ अलाइन किया जाएगा. साथ ही, iOS और iPadOS पर Safari के काम करने के तरीके को iOS, iPadOS, और Windows पर Edge के काम करने के तरीके के साथ अलाइन किया जाएगा.
इस बदलाव की मदद से, लेखकों को यह पता चल सकता है कि Chrome किस तरह से काम करेगा. भले ही, Chrome किसी भी ऑपरेटिंग सिस्टम पर चल रहा हो. इसके अलावा, यह व्यूपोर्ट से जुड़ी यूनिट को स्थिर रखने में मदद करता है: ओएसके को दिखाने या छिपाने से इन यूनिट पर कोई असर नहीं पड़ता.
पर कोई असर नहीं पड़ताकिसी दूसरे व्यवहार के लिए ऑप्ट-इन करना
अगर आपको अपनी वेबसाइट के लिए, 108 वर्शन से पहले के साइज़ में बदलाव करने के तरीके का इस्तेमाल करना है, तो परेशान न हों. Chrome 108 में, व्यूपोर्ट मेटा टैग का एक एक्सटेंशन भी शिप किया जा रहा है.
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 पर जाएं. रिपोर्ट के टाइटल में “ऑन-स्क्रीन कीबोर्ड” ज़रूर शामिल करें.