पब्लिश किया गया: 28 फ़रवरी, 2025
ऐप्लिकेशन को किनारे से किनारे तक दिखाने की सुविधा, Android की एक सुविधा है. इसकी मदद से, ऐप्लिकेशन Android सिस्टम बार के पीछे ड्रॉ करके, डिसप्ले की पूरी चौड़ाई और ऊंचाई तक फैल सकते हैं.
Chrome 135 से पहले, Android पर Chrome का स्क्रीन एज-टू-एज नहीं होता था. इस गाइड में बताया गया है कि इस बदलाव का वेबसाइटों पर क्या असर पड़ेगा. साथ ही, यह भी बताया गया है कि डेवलपर के तौर पर, इस बदलाव को अपनाने के लिए क्या किया जा सकता है.
हर जगह मौजूद बार
Android में, ऑपरेटिंग सिस्टम से मिलने वाले सिस्टम बार होते हैं.
स्टेटस बार, कैप्शन बार, और नेविगेशन बार को मिलाकर, सिस्टम बार कहा जाता है. ये डिवाइस की बैटरी लेवल, समय, और सूचनाओं की चेतावनियां जैसी ज़रूरी जानकारी दिखाते हैं. साथ ही, कहीं से भी डिवाइस के साथ सीधे इंटरैक्ट करने की सुविधा देते हैं.
स्क्रीन पर सबसे ऊपर, आपको स्टेटस बार दिखेगा. इसमें सूचना आइकॉन और सिस्टम आइकॉन होते हैं.

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

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

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

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

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

सेफ़ एरिया के निचले हिस्से का इनसेट इस्तेमाल करना
व्यूपोर्ट में सबसे नीचे मौजूद एलिमेंट के लिए, 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); /* 🛑 Don't do this, as it causes layout thrashing. */
}
सेफ़ एरिया के निचले हिस्से के इनसेट और सेफ़ एरिया के निचले हिस्से के ज़्यादा से ज़्यादा इनसेट का इस्तेमाल करना
इसके बजाय, हमारा सुझाव है कि आप 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));
}
विज़ुअल नतीजा, padding-bottom: env(safe-area-inset-bottom, 0px);
के तरीके जैसा ही है, लेकिन यह काफ़ी बेहतर तरीके से काम करता है. जब ठोड़ी हटती है, तो सिर्फ़ bottom
की कैलकुलेट की गई वैल्यू में बदलाव करना होता है. इसलिए, लेआउट में कोई बदलाव नहीं होता.

Chrome 135 से पहले, पूरे स्क्रीन पर विंडो देखने की सुविधा आज़माएं
सार्वजनिक तौर पर रिलीज़ होने से पहले, पूरे स्क्रीन पर विज्ञापन देखने की सुविधा को आज़माने के लिए, आपको chrome://flags
की मदद से Chrome की सुविधा के फ़्लैग चालू करने होंगे:
EdgeToEdgeBottomChin
(ज़रूरी नहीं, इसे "डबग चालू है" पर सेट करें. इससे, ठोड़ी के आधे हिस्से को गुलाबी रंग में रंग दिया जाएगा, ताकि उसे दूसरे यूज़र इंटरफ़ेस (यूआई) से साफ़ तौर पर अलग किया जा सके)DrawCutOutEdgeToEdge
BottomBrowserControlsRefactor
"चालू है" पर सेट न करें, बल्कि "चालू है डिस्पैच yOffset" पर सेट करेंDynamicSafeAreaInsets
DynamicSafeAreaInsetsOnScroll
EdgeToEdgeWebOptIn
DrawKeyNativeEdgeToEdge
EdgeToEdgeSafeAreaConstraint
"चालू है" पर सेट न करें, बल्कि "स्क्रोल किए जा सकने वाले वैरिएशन चालू है" पर सेट करें
पक्का करें कि ये फ़्लैग चालू न हों:
DrawNativeEdgeToEdge
EdgeToEdgeEverywhere
Chrome को दो बार रीस्टार्ट करें.
आपकी राय, सुझाव या शिकायत हमारे काम की होगी
अगर आपको Chrome और इसके किनारे से किनारे तक स्क्रीन भरने की सुविधा के बारे में कोई सुझाव, शिकायत या राय देनी है, तो कृपया "यूज़र इंटरफ़ेस > ब्राउज़र > मोबाइल > EdgeToEdge" कॉम्पोनेंट में जाकर, Chromium में गड़बड़ी की शिकायत करें. आपके सुझाव हमारे लिए बेहद कीमती हैं.