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

Bramus

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

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

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

हर जगह बार

Android में, ऑपरेटिंग सिस्टम की ओर से उपलब्ध कराए गए सिस्टम बार होते हैं.

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

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

Android डिवाइस के सबसे ऊपर वाले हिस्से का इलस्ट्रेशन, जिसमें सिस्टम बार को हाइलाइट किया गया है.
Android पर स्टेटस बार को हाइलाइट किया गया है (सोर्स).

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

Android डिवाइस के निचले हिस्से का इलस्ट्रेशन, जिसमें जेस्चर वाला नेविगेशन बार दिख रहा है.
जेस्चर वाला नेविगेशन बार (source).

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

Chrome को किनारे से किनारे तक फैलाया गया है

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

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

Android डिवाइस पर Chrome की ऐसी इमेज जिसमें Chrome, डिवाइस की पूरी स्क्रीन पर नहीं दिख रहा है. बाईं ओर मौजूद इमेज में, Chrome का पता बार बड़ा करके दिखाया गया है. पता बार और जेस्चर नेविगेशन बार के बीच में, हरे रंग से हाइलाइट किया गया एक बॉक्स है. इसका साइज़ 100svh है. दाईं ओर मौजूद इमेज में, Chrome का पता बार छोटा करके दिखाया गया है. स्टेटस बार और जेस्चर वाले नेविगेशन बार के बीच में, हरे रंग से हाइलाइट किया गया एक बॉक्स है. इसका साइज़ 100lvh है. व्यू पोर्ट में नीले रंग की डैश वाली आउटलाइन दिख रही है.
Android पर Chrome 135 से पहले, Chrome में व्यूपोर्ट का कम से कम और ज़्यादा से ज़्यादा साइज़. इन साइज़ को छोटे और बड़े व्यूपोर्ट के तौर पर जाना जाता है. व्यू पोर्ट के चारों ओर नीले रंग की डैश वाली आउटलाइन होती है.

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

Android पर Chrome में व्यूपोर्ट की ऐसी इमेज जो किनारे से किनारे तक नहीं है (बाईं ओर) और Android पर Chrome में व्यूपोर्ट की ऐसी इमेज जो किनारे से किनारे तक है (दाईं ओर). हर विज़ुअलाइज़ेशन में एक नीला बॉक्स होता है. यह 100vh की ऊंचाई वाले एलिमेंट को दिखाता है. बाईं ओर मौजूद टेक्स्ट में बताया गया है कि Chrome के किनारे-से-किनारे तक न होने पर क्या होता है. इसमें लिखा है कि 'व्यूपोर्ट, सबसे ऊपर मौजूद स्टेटस बार और सबसे नीचे मौजूद जेस्चर नेविगेशन बार के बीच में रहता है'. दाईं ओर मौजूद टेक्स्ट में बताया गया है कि Chrome को एज-टू-एज करने पर क्या होता है. इसमें लिखा है कि 'व्यूपोर्ट, जेस्चर वाले नेविगेशन बार में दिखता है'.
Android पर Chrome में दिखाया गया बड़ा व्यूपोर्ट, जो किनारे से किनारे तक नहीं है (बाएं) और Chrome में दिखाया गया व्यूपोर्ट, जो किनारे से किनारे तक है (दाएं). Chrome में, किनारे से किनारे तक दिखने वाले कॉन्टेंट की सुविधा के साथ, 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 व्यवहार है. यह Chrome 135 और इसके बाद के वर्शन में उपलब्ध है.

डिफ़ॉल्ट रूप से, ऑप्ट-इन करने पर एज-टू-एज डिसप्ले होना

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

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

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

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

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

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

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

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

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

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

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

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

Android डिवाइस के इलस्ट्रेशन, जिसमें Android पर Chrome को एज-टू-एज दिखाया गया है. बाईं ओर मौजूद इमेज में, Chrome का चिन वाला हिस्सा दिख रहा है. सबसे नीचे मौजूद कॉन्टेंट (लाल रंग में दिखाया गया है) इसके ठीक ऊपर होता है. दाईं ओर मौजूद इमेज में, Chrome का चिन नहीं दिख रहा है. यहां, नीचे की ओर ऐंकर किया गया कॉन्टेंट, डिवाइस के निचले किनारे पर दिखता है. इसके साथ दिए गए टेक्स्ट में बताया गया है कि बॉटम में मौजूद कॉन्टेंट अब जेस्चर वाले नेविगेशन बार की वजह से नहीं दिख रहा है.
वेबसाइट का इलस्ट्रेशन, जिसमें सबसे नीचे मौजूद एलिमेंट में `bottom: 0` है. जब चिन दिखता है, तब सबसे नीचे मौजूद एलिमेंट, Android के नेविगेशन बार के ऊपर दिखता है. चिन के हट जाने पर, एलिमेंट को Android के नेविगेशन बार के पीछे रखा जाता है. इससे वह कुछ हद तक छिप जाता है.

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

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

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

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

Android डिवाइस का इलस्ट्रेशन, जिसमें Chrome को एज-टू-एज मोड में दिखाया गया है. ठोड़ी को स्लाइड आउट किया जा सकता है. Chrome में, पीले रंग से पेंट किया गया सुरक्षित एरिया रेक्टैंगल दिखाया गया है. इसका निचला किनारा, जेस्चर वाले नेविगेशन बार के ठीक ऊपर होता है. इस इमेज में, जेस्चर वाला नेविगेशन बार को नीले रंग में दिखाया गया है. यह व्यूपोर्ट का सबसे निचला हिस्सा है. इसके साथ दिए गए टेक्स्ट में बताया गया है कि सेफ़ एरिया रेक्टैंगल को व्यूपोर्ट में सेफ़-एरिया-बॉटम-इनसेट से इनसेट किया गया है. इससे कॉन्टेंट को जेस्चर वाले नेविगेशन बार के नीचे पेंट होने से रोका जाता है.
इस इमेज में, 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);
}
Android डिवाइस का इलस्ट्रेशन, जिसमें Chrome को एज-टू-एज मोड में दिखाया गया है. बाईं ओर दिए गए विज़ुअलाइज़ेशन में, चिन दिख रहा है और बॉटम-ऐंकर्ड कॉन्टेंट ठीक इसके ऊपर मौजूद है. दाईं ओर मौजूद विज़ुअलाइज़ेशन में, ठुड्डी नहीं दिख रही है. साथ ही, नीचे की ओर ऐंकर किए गए कॉन्टेंट को बाईं ओर मौजूद कॉन्टेंट की तरह ही रखा गया है. इस वजह से, सामान्य कॉन्टेंट जेस्चर वाले नेविगेशन बार के नीचे से दिखता है.
वेबसाइट के इलस्ट्रेशन, जिसमें सबसे नीचे मौजूद एलिमेंट में bottom प्रॉपर्टी के साथ बॉटम सेफ़ एरिया इंसर्ट का इस्तेमाल किया गया है. ठुड्डी दिखने पर, बार Android के जेस्चर वाले नेविगेशन बार के ऊपर दिखता है. जब ठुड्डी हट जाती है, तब एलिमेंट भी उसके ऊपर आ जाता है.

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

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

padding को सेफ़-एरिया-इनसेट वैल्यू पर सेट न करें.

.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. */
}

सेफ़ एरिया के बॉटम इनसेट और सेफ़ एरिया के बॉटम मैक्सिमम इनसेट का इस्तेमाल करना

इसके बजाय, हमारा सुझाव है कि आप 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-inset-bottom के साथ safe-area-max-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));
}

लाइव डेमो आज़माएं

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

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

Chrome 135 से पहले, एज-टू-एज सुविधा आज़माकर देखना

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

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

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

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

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

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

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