Android पर Chrome के लिए, एज-टू-एज माइग्रेशन की गाइड

Bramus

पब्लिश होने की तारीख: 28 फ़रवरी, 2025

एज-टू-एज Android की एक सुविधा है. इसकी मदद से, ऐप्लिकेशन को डिसप्ले की पूरी चौड़ाई और ऊंचाई पर दिखाया जा सकता है. इसके लिए, ऐप्लिकेशन को Android सिस्टम बार के पीछे ड्रॉ किया जाता है.

Chrome 135 से पहले के वर्शन में, Android पर Chrome में एज-टू-एज मोड की सुविधा उपलब्ध नहीं थी. इस गाइड में बताया गया है कि इस बदलाव का वेबसाइटों पर क्या असर होगा. साथ ही, यह भी बताया गया है कि डेवलपर के तौर पर, इस बदलाव को अपनाने के लिए क्या किया जा सकता है.

ध्यान दें: Chrome 135 में किया गया बदलाव, छोटी स्क्रीन वाले डिवाइसों के लिए है. फ़िलहाल, बड़ी स्क्रीन वाले डिवाइसों पर Android के लिए Chrome में यह सुविधा उपलब्ध नहीं है. इसे Chrome के आने वाले वर्शन में उपलब्ध कराया जाएगा.

ध्यान दें: इस सुविधा को Chrome के अलग-अलग वर्शन का इस्तेमाल करके रोल आउट किया जा रहा है. इसलिए, हो सकता है कि आपको यह Chrome के किसी पुराने वर्शन में दिखे.

हर जगह बार

Android में सिस्टम बार होते हैं, जो ऑपरेटिंग सिस्टम के साथ ही आते हैं.

स्टेटस बार, कैप्शन बार, और नेविगेशन बार को एक साथ सिस्टम बार कहा जाता है. इनमें बैटरी लेवल, समय, और सूचनाओं जैसी अहम जानकारी दिखती है. साथ ही, इनकी मदद से डिवाइस को कहीं से भी सीधे तौर पर इस्तेमाल किया जा सकता है.

स्क्रीन पर सबसे ऊपर, आपको स्टेटस बार दिखेगा. इसमें सूचना आइकॉन और सिस्टम आइकॉन होते हैं.

Android पर हाइलाइट किया गया स्टेटस बार (सोर्स).

स्क्रीन पर सबसे नीचे, आपको नेविगेशन बार दिखेगा. इसकी मदद से, वापस जाने, होम पेज पर जाने, और खास जानकारी वाले कंट्रोल का इस्तेमाल करके नेविगेशन को कंट्रोल किया जा सकता है. यह तीन बटन वाला क्लासिक नेविगेशन या जेस्चर वाला मॉडर्न नेविगेशन बार हो सकता है.

जेस्चर वाला नेविगेशन बार (सोर्स).

Android सिस्टम बार के अलावा, Chrome में एक पता बार भी होता है. यह स्क्रोल करने पर, डाइनैमिक तौर पर बड़ा और छोटा होता है.

Chrome में एज-टू-एज मोड की सुविधा

जब किसी वेबसाइट पर विज़िट किया जाता है, तो वह वेबसाइट एक रेक्टैंगल में दिखती है. इसे (लेआउट) व्यूपोर्ट कहा जाता है.

Android पर Chrome 135 से पहले के वर्शन में, लेआउट व्यूपोर्ट को सबसे ऊपर मौजूद स्टेटस बार और सबसे नीचे मौजूद जेस्चर वाले नेविगेशन बार के बीच बनाया जाता है. Chrome के पता बार की मौजूदगी (या उसकी कमी) से व्यूपोर्ट के साइज़ पर असर पड़ सकता है. हालांकि, व्यूपोर्ट कभी भी सबसे ऊपर मौजूद सिस्टम बार या सबसे नीचे मौजूद जेस्चर वाले नेविगेशन बार में नहीं फैलेगा.

Chrome 135 से पहले, Android पर Chrome में व्यूपोर्ट का कम से कम और ज़्यादा से ज़्यादा साइज़. इन साइज़ को छोटे और बड़े व्यूपोर्ट के तौर पर जाना जाता है. व्यूपोर्ट की आउटलाइन नीले रंग की डैश वाली लाइन से बनी होती है.

Chrome 135 से, व्यूपोर्ट को Android के जेस्चर वाले नेविगेशन बार तक बढ़ाया जा सकता है. इसे एज-टू-एज डिसप्ले कहा जाता है.

Android पर Chrome में दिखाया गया बड़ा व्यूपोर्ट, जो एज-टू-एज नहीं है (बाईं ओर) और Chrome में दिखाया गया बड़ा व्यूपोर्ट, जो एज-टू-एज है (दाईं ओर). Chrome में, स्क्रीन पर पूरी तरह फ़िट होने वाले मोड में, Chrome के डाइनैमिक टूलबार को छोटा करने पर, व्यूपोर्ट जेस्चर वाले नेविगेशन बार के एरिया तक फैल जाता है.

ध्यान दें: iOS 11.3 के रिलीज़ होने के बाद, iOS पर Chrome में एज-टू-एज की सुविधा जोड़ी गई. इस गाइड में दिए गए सुझाव, iOS पर चलने वाले Chrome पर भी लागू होते हैं.

एज-टू-एज डिसप्ले के बिना Chrome का व्यवहार

इस रिकॉर्डिंग में, Android पर Chrome को दिखाया गया है. इसमें Chrome का पता बार (सबसे ऊपर) पेज को स्क्रोल करने पर, डाइनैमिक तरीके से हट जाता है. हालांकि, Android-नेटिव टॉप स्टेटस बार और सबसे नीचे मौजूद Android-नेटिव नेविगेशन बार अपनी जगह पर बने रहते हैं.

पहले की सुविधा: Android पर Chrome में, स्क्रीन को पूरा कवर करने की सुविधा नहीं थी और https://developer.chrome.com/ लोड किया गया था.

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

एज-टू-एज डिसप्ले के साथ Chrome का काम करने का तरीका

Chrome 135 से, Chrome वेब कॉन्टेंट को डिवाइस के सबसे निचले हिस्से तक दिखा सकता है. इसके लिए, व्यूपोर्ट को जेस्चर वाले नेविगेशन बार के एरिया तक बढ़ाया जाता है.

"चिन" के साथ डाइनैमिक एज-टू-एज

डिफ़ॉल्ट रूप से, Chrome में एज-टू-एज मोड चालू होने पर, जेस्चर वाले नेविगेशन बार के ऊपर एक नया डाइनैमिक बॉटम बार दिखता है. इसे "चिन" कहा जाता है. Chrome के पता बार की तरह ही, स्क्रोल करने पर यह चिन हट जाती है. इससे व्यूपोर्ट के साइज़ पर असर पड़ता है.

Android पर Chrome में, एज-टू-एज मोड की सुविधा के साथ की गई इस रिकॉर्डिंग में, पेज को नीचे की ओर स्क्रोल करने पर, Chrome का पता बार और चिन, दोनों डाइनैमिक तौर पर पीछे हट जाते हैं. इससे व्यूपोर्ट बड़ा हो जाता है. साथ ही, वेब कॉन्टेंट को डिवाइस के सबसे निचले किनारे तक दिखाया जा सकता है.

नया व्यवहार: Android पर Chrome में, स्क्रीन को पूरी तरह से कवर करने की सुविधा और https://developer.chrome.com/ लोड किया गया. ध्यान दें कि पेज स्क्रोल करने पर, सबसे नीचे मौजूद चिन कैसे स्लाइड हो जाती है.

Chrome 135 और इसके बाद के वर्शन में, चिन का यह व्यवहार Chrome का नया डिफ़ॉल्ट व्यवहार है.

ऑप्ट-इन करने पर, डिफ़ॉल्ट रूप से ऐप्लिकेशन को एज-टू-एज मोड में दिखाना

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

एज-टू-एज डिसप्ले की सुविधा चालू होने पर, पेज लोड होने पर व्यूपोर्ट, स्क्रीन के सबसे निचले हिस्से तक दिखता है. कोई चिन मौजूद नहीं है.

कोई पेज, viewport मेटा टैग और उसकी viewport-fit कुंजी का इस्तेमाल करके, यह बता सकता है कि वह एज-टू-एज सुविधा के साथ काम करता है.

एज-टू-एज डिसप्ले की सुविधा के लिए ऑप्ट-इन करने के लिए, viewport-fit को cover की वैल्यू पर सेट करें.

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

viewport-fit की अलग-अलग वैल्यू के बारे में ज़्यादा जानने के लिए, एमडीएन पर जाएं.

जेस्चर वाले नेविगेशन बार की वजह से, कॉन्टेंट को दिखने में आने वाली रुकावट को दूर करना

एज-टू-एज मोड में, आपको ऐसे कॉन्टेंट का ध्यान रखना चाहिए जो जेस्चर वाले नेविगेशन बार की वजह से छिप सकता है.

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

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

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

चिन मौजूद होने पर, उपयोगकर्ता शुरुआत में कॉन्टेंट को ऐक्सेस कर पाएंगे. हालांकि, चिन के हटते ही Android के नेविगेशन बार की वजह से कॉन्टेंट को ऐक्सेस करने में रुकावट आएगी.

एक वेबसाइट का इलस्ट्रेशन, जिसमें `bottom: 0` के साथ सबसे नीचे मौजूद एलिमेंट दिखाया गया है. चिन दिखने पर, सबसे नीचे मौजूद एलिमेंट, Android के नेविगेशन बार के ऊपर दिखता है. जब चिन हट जाता है, तो एलिमेंट को Android के नेविगेशन बार के पीछे रखा जाता है. इससे वह एलिमेंट कुछ हद तक छिप जाता है.

इस समस्या को हल करने के लिए, सुरक्षित एरिया इनसेट का इस्तेमाल करें. इससे, जिन एलिमेंट पर असर पड़ा है उन्हें Android के नेटिव बॉटम जेस्चर वाले नेविगेशन बार के ऊपर रखा जा सकता है या उनके बैकग्राउंड को उस एरिया तक बढ़ाया जा सकता है.

सेफ़ एरिया इनसेट

सेफ़ एरिया इनसेट, चार एनवायरमेंट वैरिएबल होते हैं. ये व्यूपोर्ट के किनारे से ऊपर, दाएं, नीचे, और बाएं इनसेट के हिसाब से रेक्टैंगल तय करते हैं.

इन चारों वैल्यू को मिलाकर, सेफ़ एरिया रेक्टैंगल बनता है. इसमें कॉन्टेंट को सुरक्षित तरीके से रखा जा सकता है, ताकि Android जेस्चर वाले नेविगेशन बार जैसी चीज़ों से इसमें कोई रुकावट न आए.

एज-टू-एज मोड में Chrome का इलस्ट्रेशन. इसमें व्यूपोर्ट और सुरक्षित एरिया रेक्टैंगल को पीले रंग से दिखाया गया है. चिन को वापस खींचने की वजह से, सुरक्षित जगह के सबसे नीचे मौजूद इनसेट, सुरक्षित जगह के रेक्टैंगल को जेस्चर वाले नेविगेशन बार तक पहुंचने से रोकता है. इस वजह से, आपको जेस्चर वाले नेविगेशन बार के नीचे से व्यूपोर्ट दिखता है.

सुरक्षित जगह के निचले हिस्से का इस्तेमाल करना

व्यूपोर्ट के सबसे नीचे मौजूद एलिमेंट के लिए, bottom प्रॉपर्टी की वैल्यू के तौर पर safe-area-inset-bottom का इस्तेमाल करें. इससे एलिमेंट, जेस्चर वाले नेविगेशन बार के नीचे नहीं दिखेगा. safe-area-inset-bottom से मिलने वाली वैल्यू, चिन के हटने पर डाइनैमिक तरीके से अपडेट हो जाती है. इससे सबसे नीचे मौजूद एलिमेंट, Android के जेस्चर वाले नेविगेशन बार के ऊपर अच्छी तरह से दिखते हैं.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

एक वेबसाइट के इलस्ट्रेशन, जिसमें सबसे नीचे मौजूद एलिमेंट, bottom प्रॉपर्टी के साथ सबसे नीचे मौजूद सुरक्षित एरिया इनसेट का इस्तेमाल करता है. चिन दिखने पर, बार Android के जेस्चर वाले नेविगेशन बार के ऊपर दिखता है. चिन के हट जाने पर, एलिमेंट भी उसके ऊपर बैठ जाता है.

जैसा कि इमेज में देखा जा सकता है, नतीजा अब भी सही नहीं है: चिन को हटाने पर, पेज का बाकी कॉन्टेंट जेस्चर वाले नेविगेशन बार के हिस्से में दिखने लगता है. ऐसा इसलिए होता है, क्योंकि इस स्थिति में व्यूपोर्ट, जेस्चर वाले नेविगेशन बार के हिस्से तक फैल जाता है.

नीचे ऐंकर किए गए कॉन्टेंट के नीचे कॉन्टेंट को दिखने से रोकने के लिए, आम तौर पर padding-bottom को safe-area-inset-bottom पर सेट किया जाता है. इस तरह, चिन के छिपने पर, सबसे नीचे ऐंकर किया गया एलिमेंट अपने-आप बड़ा हो जाता है. हालांकि, यह तरीका काम करता है, लेकिन इसका सुझाव नहीं दिया जाता. इसकी वजह यह है कि जब चिन हटता है, तो इससे लेआउट थ्रैशिंग होती है.

padding को safe-area-inset वैल्यू पर सेट न करें.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}

अहम जानकारी: परफ़ॉर्मेंस में गिरावट को रोकने के लिए, Chrome इस पैटर्न का पता चलने पर, स्क्रोल करने के दौरान चिन को स्लाइड नहीं करेगा.

सुरक्षित जगह के निचले हिस्से के इनसेट और सुरक्षित जगह के निचले हिस्से के ज़्यादा से ज़्यादा इनसेट का इस्तेमाल करना

इसके बजाय, हमारा सुझाव है कि safe-area-inset-bottom और safe-area-max-inset-bottom को मिलाकर इस्तेमाल करें. डाइनैमिक safe-area-inset-bottom के उलट, safe-area-max-inset-bottom, safe-area-inset-bottom की ज़्यादा से ज़्यादा वैल्यू दिखाता है. डाइनैमिक, चिन के मूव होने पर डाइनैमिक तरीके से अपडेट होता है.

इस safe-area-max-inset-bottom का इस्तेमाल करके, नीचे ऐंकर किए गए एलिमेंट को आगे की ओर बढ़ाएं. साथ ही, इसे safe-area-inset-bottom के साथ जोड़कर एलिमेंट को नीचे की ओर खींचें, ताकि यह चिन के पीछे सेट हो जाए.

safe-area-max-inset-bottom को safe-area-inset-bottom के साथ मिलाकर इस्तेमाल करें

:root {
  --safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
  --bottom-bar-height: 50px;
}

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  height: var(--bottom-bar-height);
  padding-bottom: var(--safe-area-max-inset-bottom);
  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}

body {
  padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}

लाइव डेमो आज़माना

ध्यान दें: safe-area-max-inset-bottom के लिए 36px फ़ॉलबैक वैल्यू को उन ब्राउज़र के लिए चुना जाता है जो safe-area-max-inset-bottom के साथ काम नहीं करते. यह वैल्यू इसलिए चुनी गई, क्योंकि iOS पर Safari में सिंगल टैब मोड में, पोर्ट्रेट मोड में ज़्यादा से ज़्यादा बॉटम ऑफ़सेट 36px होता है.

अहम जानकारी: Chrome में कोड ऑप्टिमाइज़ेशन–एक तथाकथित फ़ास्ट पाथ–होता है, जो calc(env(safe-area-inset-bottom, …) +/- …); पैटर्न का पता चलने पर लागू होता है. इस तेज़ पाथ की मदद से, बॉटम-ऐंकर किया गया कॉन्टेंट, चिन के साथ-साथ बेहतर तरीके से मूव कर सकता है. हालांकि, ऐसा तब होता है, जब चिन मूव कर रही हो.

विज़ुअल के तौर पर, नतीजा padding-bottom: env(safe-area-inset-bottom, 0px); तरीके जैसा ही होता है. हालांकि, यह बेहतर परफ़ॉर्म करता है. चिन के दूर जाने पर, सिर्फ़ bottom की कैलकुलेट की गई वैल्यू को बदलना पड़ता है. इसलिए, लेआउट थ्रैशिंग नहीं होती.

किसी वेबसाइट के इलस्ट्रेशन, जिसमें सबसे नीचे ऐंकर किया गया एलिमेंट है. यह एलिमेंट, सुरक्षित जगह के इनसेट को ध्यान में रखता है. चिन दिखने पर (बाईं ओर), एलिमेंट चिन के ऊपर दिखता है. जब चिन नहीं दिखती है, तो एलिमेंट विज़ुअल तौर पर Android के जेस्चर वाले नेविगेशन बार में चला जाता है.

ध्यान दें: Chrome 135 से, सेफ़ एरिया के लिए ज़्यादा से ज़्यादा इनसेट (safe-area-max-inset-bottom और अन्य) उपलब्ध हैं.

Chrome 135 से पहले, एज-टू-एज मोड आज़माना

एज-टू-एज मोड को सार्वजनिक तौर पर रिलीज़ किए जाने से पहले आज़माने के लिए, आपको chrome://flags पर जाकर, Chrome के कुछ फ़ीचर फ़्लैग चालू करने होंगे:

• EdgeToEdgeBottomChin (इसके अलावा, इसे "डीबग चालू है" पर सेट किया जा सकता है. इससे चिन का आधा हिस्सा गुलाबी रंग का हो जाएगा, ताकि इसे अन्य यूज़र इंटरफ़ेस (यूआई) से साफ़ तौर पर अलग किया जा सके)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor ("चालू है" पर सेट न करें, बल्कि "डिस्पैच yOffset चालू है" पर सेट करें)
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint ("चालू है" पर सेट न करें, बल्कि "स्क्रोल किया जा सकने वाला वैरिएशन चालू है" पर सेट करें)

पक्का करें कि ये फ़्लैग चालू न हों:

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

Chrome को दो बार रीस्टार्ट करें.

आपकी राय, सुझाव या शिकायत हमारे काम की होगी

अगर आपको Chrome और इसके एज-टू-एज मोड के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो कृपया "यूज़र इंटरफ़ेस > ब्राउज़र > मोबाइल > EdgeToEdge" कॉम्पोनेंट में जाकर, Chromium की गड़बड़ी की शिकायत करें. आपके सुझाव हमारे लिए बेहद कीमती हैं.