Android पर Chrome में, व्यूपोर्ट के साइज़ में होने वाले बदलावों के लिए तैयार रहें

Bramus

नवंबर में, Chrome 108 के रिलीज़ होने के बाद, Chrome में कुछ बदलाव किए जाएंगे. इन बदलावों के बाद, ऑन-स्क्रीन कीबोर्ड (ओएसके) दिखने पर, लेआउट व्यूपोर्ट के काम करने के तरीके में बदलाव होगा. इस बदलाव के बाद, Android पर Chrome का साइज़ बदलने के बजाय, लेआउट व्यूपोर्ट का साइज़ नहीं बदला जाएगा. इससे, Android पर Chrome के काम करने का तरीका, iOS पर Chrome और iOS पर Safari के काम करने के तरीके जैसा हो जाएगा.

यहां इस बारे में बताया गया है कि क्या हो रहा है, Chrome यह बदलाव क्यों कर रहा है, और इसके लिए आपको क्या करना चाहिए.

लेआउट व्यूपोर्ट और विज़ुअल व्यूपोर्ट

किसी वेबसाइट पर जाने पर, पेज लोड होने के बाद भी आपको उसका पूरा कॉन्टेंट नहीं दिखता. इसके बजाय, ब्राउज़र आपको एक व्यूपोर्ट उपलब्ध कराता है, जिससे आपको पेज का कोई हिस्सा दिखता है. इस व्यूपोर्ट को लेआउट व्यूपोर्ट भी कहा जाता है. जब किसी पेज का कॉन्टेंट बहुत बड़ा हो जाता है, तो ब्राउज़र स्क्रोलिंग की सुविधा देता है.

position: fixed का इस्तेमाल करके एलिमेंट की पोज़िशन तय करने पर, उन्हें उस लेआउट व्यूपोर्ट के हिसाब से लेआउट किया जाएगा. पेज को नीचे की ओर स्क्रोल करने पर, लेआउट व्यूपोर्ट अपनी जगह पर बना रहता है. इसलिए, position: fixed का इस्तेमाल करने वाले एलिमेंट भी अपनी जगह पर बने रहेंगे.

इस लेआउट व्यूपोर्ट के अलावा, ब्राउज़र में विज़ुअल व्यूपोर्ट भी उपलब्ध होता है. यह व्यूपोर्ट के उस हिस्से को दिखाता है जो फ़िलहाल दिख रहा है. ज़ूम लेवल 1 पर, यह विज़ुअल व्यूपोर्ट उतना ही बड़ा होता है जितना लेआउट व्यूपोर्ट.

पिंच-ज़ूम इन करने पर, लेआउट व्यूपोर्ट के हिसाब से विज़ुअल व्यूपोर्ट का साइज़ छोटा हो जाता है.

व्यूपोर्ट का साइज़ बदलने का तरीका

किसी इनपुट या बदलाव किए जा सकने वाले किसी अन्य हिस्से पर फ़ोकस करने पर, डिवाइसों पर ऑन-स्क्रीन कीबोर्ड दिख सकता है. आम तौर पर, यह सुविधा टचस्क्रीन डिवाइसों पर ही दिखती है. इस कीबोर्ड को अक्सर वर्चुअल कीबोर्ड कहा जाता है. इसकी मदद से, उपयोगकर्ता बदलाव किए जा सकने वाले एरिया में कॉन्टेंट डाल सकते हैं.

ऐसा करने पर, ब्राउज़र अलग-अलग व्यूपोर्ट के हिसाब से इनमें से किसी एक तरीके से जवाब देते हैं:

• सिर्फ़ विज़ुअल व्यूपोर्ट का साइज़ बदलें और लेआउट व्यूपोर्ट को ऑफ़सेट करें.
• विज़ुअल व्यूपोर्ट और लेआउट व्यूपोर्ट, दोनों का साइज़ बदलें.
• वर्चुअल कीबोर्ड को दोनों के ऊपर ओवरले करते हुए, किसी भी लेआउट व्यूपोर्ट या विज़ुअल व्यूपोर्ट का साइज़ न बदलें.

इन तीन व्यवहारों को इस तरह से विज़ुअलाइज़ किया जाता है:

विज़िटर द्वारा उपयोग किए जाने वाले ब्राउज़र और OS संयोजन के आधार पर, आपके नियंत्रण से बाहर, किसी एक व्यवहार का उपयोग किया जाता है.

साइज़ बदलने के अलग-अलग तरीकों को मैप करना

इंटरऑप 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 का इस्तेमाल करने वाले एलिमेंट, लेआउट में कहीं भी दिख सकते हैं.

जब तक उपयोगकर्ता एजेंट स्निफ़िंग की सुविधा का इस्तेमाल नहीं किया जाता या बड़े पैमाने पर स्क्रिप्टिंग नहीं की जाती, तब तक आपको नहीं पता चल सकता कि किस व्यवहार का इस्तेमाल किया गया है. इस व्यवहार को भी नहीं बदला जा सकता, क्योंकि यह उपयोगकर्ता के ब्राउज़र और ओएस के कॉम्बिनेशन से तय होता है.

Chrome 108 में, डिफ़ॉल्ट तरीके में बदलाव करना

Chrome 108 से, Android पर Chrome अपने व्यूपोर्ट के साइज़ में बदलाव करने के तरीके में बदलाव करेगा. इससे, ऑन-स्क्रीन कीबोर्ड दिखने पर, लेआउट व्यूपोर्ट का साइज़ नहीं बदलेगा.

इससे, Android पर Chrome के काम करने के तरीके को iOS, iPadOS, Windows, और CrOS पर Chrome के काम करने के तरीके के साथ अलाइन किया जाएगा. साथ ही, iOS और iPadOS पर Safari के काम करने के तरीके को iOS, iPadOS, और Windows पर Edge के काम करने के तरीके के साथ अलाइन किया जाएगा.

इस बदलाव की मदद से, लेखकों को यह पता चल सकता है कि Chrome किस तरह से काम करेगा. भले ही, Chrome किसी भी ऑपरेटिंग सिस्टम पर चल रहा हो. इसके अलावा, यह व्यूपोर्ट-सापेक्षिक इकाइयों को स्थिर करने की अनुमति देता है: OSK को दिखाने या छिपाने से इन इकाइयों पर कोई असर नहीं पड़ता.

किसी दूसरे व्यवहार के लिए ऑप्ट-इन करना

अगर आपको अपनी वेबसाइट के लिए, 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 का इस्तेमाल करेगा.

विज़ुअलाइज़ेशन में, सेटिंग का अलग-अलग व्यूपोर्ट पर यह असर दिखता है:

इस डेमो वेबसाइट पर, अपने ब्राउज़र में हर वैल्यू के असर को आज़माया जा सकता है.

जांच और सुझाव

हमें उम्मीद है कि मौजूदा साइटों में कुछ छोटे-मोटे अंतर होंगे. हालांकि, इनसे साइटें ब्लॉक नहीं होंगी, क्योंकि Android पर Chrome 108 अब iOS पर Safari की तरह ही काम करेगा. इसलिए, iOS पर Safari पर ठीक से काम करने वाली वेबसाइटें, Android पर Chrome 108 पर भी ठीक से काम करनी चाहिए.

हालांकि, हम वेबसाइट के लेखकों को Chrome 108 में अपनी वेबसाइटों की जांच करने का सुझाव देते हैं. यह वर्शन 27 अक्टूबर, 2022 से बीटा वर्शन में उपलब्ध है. खास तौर पर, उन एलिमेंट पर ध्यान दें जो position: fixed का इस्तेमाल करते हैं और/या विंडो स्क्रीन के हिसाब से इकाइयों पर निर्भर होते हैं.

किसी सुझाव की शिकायत crbug.com पर की जा सकती है. रिपोर्ट के शीर्षक में “ऑन-स्क्रीन कीबोर्ड” शामिल करना न भूलें.

अन्य संसाधन

• Chrome की स्थिति की जानकारी
• एक्सप्लेनर
• डेमो