منتشرشده: ۲۸ فوریه ۲۰۲۵
لبه‌به‌لبه ویژگی Android است که به برنامه‌ها امکان می‌دهد با رسم در پشت نوارهای سیستم Android، کل عرض و ارتفاع نمایشگر را بپوشانند.
قبل‌از Chrome 135، Chrome در Android از لبه تا لبه طراحی نمی‌کرد. این راهنما توضیح می‌دهد که این تغییر چه تأثیری بر وب‌سایت‌ها دارد و شما به‌عنوان توسعه‌دهنده چه کاری می‌توانید برای پذیرفتن این تغییر انجام دهید.
میله‌ها در همه‌جا
Android دارای نوارهای سیستم است که توسط خود سیستم‌عامل ارائه می‌شود.
نوار وضعیت، نوار زیرنویس ناشنوایان، و نوار پیمایش در مجموع نوارهای سیستم نامیده می‌شوند. این ویجت‌ها اطلاعات مهمی مثل سطح شارژ باتری، زمان، و هشدارهای اعلان را نمایش می‌دهند و امکان تعامل مستقیم با دستگاه را از هرجا فراهم می‌کنند.
در بالای صفحه می‌توانید نوار وضعیت را پیدا کنید که حاوی نمادهای اعلان و نمادهای سیستم است.
در پایین صفحه می‌توانید نوار پیمایش را پیدا کنید که به شما امکان می‌دهد پیمایش را بااستفاده از کنترل‌های برگشت، صفحه اصلی، و نمای کلی کنترل کنید. این می‌تواند پیمایش کلاسیک سه‌دکمه‌ای یا نوار پیمایش اشاره‌ای مدرن باشد.
علاوه‌بر نوارهای سیستم Android، خود Chrome نیز دارای نوار نشانی است که با پیمایش کردن به‌صورت پویا گسترش می‌یابد و جمع می‌شود.
Chrome از لبه تا لبه صفحه را می‌گیرد
وقتی از وب‌سایتی بازدید می‌کنید، آن وب‌سایت در مستطیلی که به‌عنوان درگاه (چیدمان) شناخته می‌شود ارائه می‌شود.
در Chrome در Android، قبل‌از Chrome 135، آن درگاه نمایش چیدمان بین نوار وضعیت بالا و نوار پیمایش اشاره پایین رسم می‌شود. وجود نوار نشانی Chrome (یا عدم وجود آن) می‌تواند بر اندازه ناحیه نمایش تأثیر بگذارد، اما ناحیه نمایش هرگز به نوار سیستم بالا یا نوار پیمایش اشاره پایین گسترش نخواهد یافت.
از Chrome 135، نمای دید مجاز است تا به نوار پیمایش اشاره Android گسترش یابد. این رفتار به‌عنوان لبه‌به‌لبه توصیف می‌شود.
رفتار Chrome بدون لبه‌به‌لبه
در ضبط زیر، Chrome در Android بدون پشتیبانی از لبه تا لبه نشان داده می‌شود، نوار نشانی Chrome (در بالا) به‌طور پویا با پیمایش صفحه از سر راه کنار می‌رود. بااین‌حال، نوار وضعیت بالای صفحه و نوار پیمایش پایین صفحه که بومی Android هستند در جای خود ثابت می‌مانند.
در اینجا، اندازه درگاه نمایش چیدمان با جمع شدن یا ازهم باز شدن نوار نشانی Chrome تغییر می‌کند.
عملکرد Chrome با لبه‌به‌لبه
از Chrome 135، با گسترش دادن درگاه دید به ناحیه نوار پیمایش اشاره، Chrome می‌تواند محتوای وب را تا لبه پایین دستگاه بکشد.
تمام‌صفحه پویا با «چانه»
به‌طور پیش‌فرض، Chrome لبه‌به‌لبه نوار پایین پویای جدیدی را که به‌عنوان «چانه» شناخته می‌شود در ناحیه نوار پیمایش با اشاره نشان می‌دهد. همانند نوار نشانی Chrome، این چانه با شروع پیمایش از سر راه کنار می‌رود و بر اندازه ناحیه نمایش تأثیر می‌گذارد.
در ضبط زیر از Chrome در Android با پشتیبانی لبه‌به‌لبه، هم نوار نشانی Chrome و هم چانه به‌صورت پویا با پایین رفتن صفحه جمع می‌شوند. این کار باعث می‌شود نمای دید گسترش یابد و محتوای وب تا لبه پایین دستگاه کشیده شود.
این رفتار چانه، رفتار پیش‌فرض جدید 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 مسدود نشود.
استفاده از درج پایین ناحیه امن
برای عناصری که در پایین نمای دید قرار می‌گیرند، از 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 استفاده می‌کند. وقتی چانه قابل‌مشاهده باشد، نوار بالای نوار پیمایش اشاره‌ای 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-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(درصورت تمایل، آن را روی «فعال کردن اشکال‌زدایی» تنظیم کنید تا نیمی از چانه به رنگ صورتی درآید و از این طریق به‌وضوح از دیگر عناصر رابط کاربری متمایز شود)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(روی «فعال» تنظیم نکنید، بلکه روی «فعال کردن جابه‌جایی y» تنظیم کنید)DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(روی «فعال» تنظیم نکنید، بلکه روی «فعال کردن گونه پیمایشی» تنظیم کنید)
مطمئن شوید پرچم‌های زیر فعال نباشند:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Chrome را دو بار بازراه‌اندازی کنید.
بازخوردتان را تقاضا می‌کنیم
اگر درباره Chrome و پیاده‌سازی لبه‌به‌لبه آن بازخوردی دارید، لطفاً با ثبت اشکال Chromium در عنصر «واسط کاربر > مرورگر > تلفن همراه > لبه‌به‌لبه» با ما تماس بگیرید. بازخورد شما را ارج می‌نهیم.