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

Bramus

पब्लिश किया गया: 28 फ़रवरी, 2025

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

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

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

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

हर जगह मौजूद बार

Android में, ऑपरेटिंग सिस्टम से मिलने वाले सिस्टम बार होते हैं.

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

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

Android के स्टेटस बार में, (source) को हाइलाइट किया गया.

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

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

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 पर 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 की अलग-अलग वैल्यू के बारे में ज़्यादा जानने के लिए, MDN पर जाएं.

ऐसे कॉन्टेंट को मैनेज करना जिस पर जेस्चर नेविगेशन बार की वजह से रुकावट आ सकती है

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

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

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

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

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

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

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

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

Browser Support

• 69
• 79
• 65
• 11

Source

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

इन चार वैल्यू को मिलाकर, सेफ़ एरिया रेक्टैंगल बनता है. इसमें कॉन्टेंट को सुरक्षित तरीके से रखा जा सकता है, ताकि 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 को सेफ़-एरिया-इनसेट वैल्यू पर सेट न करें.

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

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

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

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

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

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

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

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

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

ध्यान दें: ज़्यादा से ज़्यादा सुरक्षित क्षेत्र के इनसेट (safe-area-max-inset-bottom और उसके साथी) Chrome 135 से उपलब्ध हैं.

Chrome 135 से पहले, पूरे स्क्रीन पर विंडो देखने की सुविधा आज़माएं

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

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

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

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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