تاریخ انتشار: 28 فوریه 2025
لبه به لبه یک ویژگی اندروید است که به برنامهها اجازه میدهد با کشیدن پشت نوارهای سیستم اندروید، تمام عرض و ارتفاع نمایشگر را بپوشانند.
قبل از کروم 135، کروم در اندروید لبه به لبه ترسیم نمی کرد. این راهنما تأثیر این تغییر را بر وب سایت ها و آنچه شما به عنوان یک توسعه دهنده می توانید برای پذیرش این تغییر انجام دهید را توضیح می دهد.
همه جا بارها
اندروید دارای نوارهای سیستمی است که توسط خود سیستم عامل ارائه شده است.
نوار وضعیت، نوار عنوان و نوار ناوبری با هم نوارهای سیستم نامیده می شوند. آنها اطلاعات مهمی مانند سطح باتری، زمان و هشدارهای اعلان را نمایش می دهند و تعامل مستقیم دستگاه را از هر کجا ارائه می دهند.
در بالای صفحه می توانید نوار وضعیت را پیدا کنید که حاوی نمادهای اعلان و نمادهای سیستم است.

در پایین صفحه میتوانید نوار پیمایش را پیدا کنید که به شما امکان میدهد با استفاده از کنترلهای بازگشت، خانه و نمای کلی، پیمایش را کنترل کنید. این می تواند ناوبری سه دکمه ای کلاسیک یا نوار ناوبری حرکتی مدرن باشد.

علاوه بر نوارهای سیستم اندروید، خود کروم دارای یک نوار آدرس است که به صورت پویا گسترش مییابد و با اسکرول کردن خود را جمع میکند.
کروم لبه به لبه می رود
هنگامی که از یک وب سایت بازدید می کنید، آن وب سایت در یک مستطیل به نام نمای (طرح بندی) نمایش داده می شود.
در Chrome Android، قبل از Chrome 135، این نمای طرح بندی بین نوار وضعیت بالا و نوار پیمایش حرکتی پایین کشیده شده است. وجود نوار آدرس کروم (یا فقدان آن) میتواند بر اندازه درگاه نمایش تأثیر بگذارد، اما نمای درگاه هرگز به نوار سیستم بالا یا نوار ناوبری اشارهای پایین گسترش نمییابد.

از Chrome 135، درگاه دید مجاز است به نوار ناوبری حرکتی Android گسترش یابد. این رفتاری است که به عنوان لبه به لبه توصیف می شود.

رفتار کروم بدون لبه به لبه
ضبط زیر Chrome را در Android بدون پشتیبانی لبه به لبه نشان میدهد، نوار آدرس Chrome (در بالا) بهطور پویا با پیمایش صفحه از مسیر خارج میشود. با این حال، نوار وضعیت بالای اندروید بومی و نوار ناوبری بومی اندروید در پایین ثابت هستند.
در اینجا، با جمع شدن یا بزرگ شدن نوار آدرس کروم، اندازه نمای طرح بندی تغییر می کند.
رفتار کروم با لبه به لبه
از Chrome 135، Chrome میتواند محتوای وب را تا لبه پایین دستگاه با گسترش درگاه دید به ناحیه نوار پیمایش اشارهای بکشد.
لبه به لبه پویا با "چانه"
بهطور پیشفرض، Chrome edge-to-edge یک نوار پایین پویا جدید به نام «چانه» را در ناحیه نوار پیمایش اشارهای نشان میدهد. درست مانند نوار آدرس کروم، این چانه با شروع پیمایش از مسیر خارج میشود و بر اندازه درگاه دید تأثیر میگذارد.
در ضبط زیر از Chrome در Android با پشتیبانی لبه به لبه، هر دو نوار آدرس کروم و چانه به صورت پویا با اسکرول صفحه به پایین جمع میشوند. این باعث می شود که درگاه دید گسترش یابد و به محتوای وب اجازه می دهد تا به لبه پایینی دستگاه کشیده شود.
این رفتار چانه رفتار پیشفرض جدید Chrome از Chrome 135 به بعد است.
به صورت پیشفرض با انتخاب گزینه، لبه به لبه میروید
وبسایتهایی که برای لبه به لبه ساخته شدهاند، میتوانند با تغییر دادن متا تگ 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 مانع نشود.

استفاده از قسمت پایینی قسمت امن
برای عناصری که در پایین درگاه نمایش قرار دارند، از safe-area-inset-bottom
به عنوان مقدار ویژگی bottom
استفاده کنید تا از قرار گرفتن آن در زیر نوار پیمایش اشارهای جلوگیری کنید. مقدار بازگردانده شده توسط safe-area-inset-bottom
به صورت پویا به روز می شود، زیرا چانه از مسیر خارج می شود، و در نتیجه عناصر در پایین به خوبی بالای نوار ناوبری حرکتی Android باقی می مانند.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}

bottom
استفاده میکند. هنگامی که چانه قابل مشاهده است، نوار بالای نوار ناوبری حرکتی اندروید قرار می گیرد. وقتی چانه از بین می رود، عنصر نیز بالای آن می نشیند.همانطور که در تصاویر می بینید، نتیجه هنوز کامل نیست: وقتی چانه از مسیر خارج می شود، محتوای صفحه باقی مانده در ناحیه نوار پیمایش حرکتی قابل مشاهده می شود. این به این دلیل است که در این حالت، دید در ناحیه نوار ناوبری حرکتی گسترش می یابد.
برای جلوگیری از رنگ آمیزی محتوا در زیر محتوای لنگر پایین، یک روش معمول استفاده شده این است که padding-bottom
روی safe-area-inset-bottom
قرار دهید. به این ترتیب عنصر لنگر پایین به طور خودکار با پنهان شدن چانه رشد می کند. در حالی که این کار می کند، این روش توصیه نمی شود، زیرا در حالی که چانه از مسیر خارج می شود، منجر به کوبیدن طرح می شود.
padding
روی مقدار امن-منطقه-inset تنظیم نکنید.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
با استفاده از قسمت پایینی قسمت ایمن و حداکثر ورودی قسمت پایینی ایمن
در عوض، رویکرد توصیه شده استفاده از ترکیبی از 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));
}
یک نسخه نمایشی زنده را امتحان کنید
نتیجه بصری همان padding-bottom: env(safe-area-inset-bottom, 0px);
رویکرد اما عملکرد بسیار بهتری دارد. از آنجایی که تنها مقدار محاسبه شده برای bottom
باید با دور شدن چانه تغییر کند، هیچ گونه کوبیدن چیدمان رخ نمی دهد.

قبل از Chrome 135 لبه به لبه را امتحان کنید
برای امتحان لبه به لبه قبل از انتشار پایدار عمومی، باید تعداد زیادی پرچم ویژگی Chrome را از طریق chrome://flags
فعال کنید:
-
EdgeToEdgeBottomChin
(به صورت اختیاری آن را روی "Enabled Debug" تنظیم کنید تا نیمی از چانه را صورتی رنگ کند تا به وضوح آن را از سایر رابط های کاربری متمایز کند) -
DrawCutOutEdgeToEdge
-
BottomBrowserControlsRefactor
(روی "Enabled" تنظیم نکنید بلکه روی "Enabled Dispatch yOffset" تنظیم کنید) -
DynamicSafeAreaInsets
-
DynamicSafeAreaInsetsOnScroll
-
EdgeToEdgeWebOptIn
-
DrawKeyNativeEdgeToEdge
-
EdgeToEdgeSafeAreaConstraint
(روی "Enabled" تنظیم نکنید بلکه روی "Enabled Scrollable Variation" تنظیم کنید.
مطمئن شوید که پرچمهای زیر فعال نیستند :
-
DrawNativeEdgeToEdge
-
EdgeToEdgeEverywhere
کروم را دو بار راه اندازی مجدد کنید.
ما بازخورد شما را می خواهیم
اگر بازخوردی در مورد Chrome و اجرای لبه به لبه آن دارید، لطفاً با ثبت یک اشکال Chromium در مؤلفه "UI > Browser > Mobile > EdgeToEdge" با ما تماس بگیرید. ما از بازخورد شما قدردانی می کنیم.