راهنمای انتقال Chrome در Android از لبه تا لبه

Bramus

تاریخ انتشار: ۲۸ فوریه ۲۰۲۵

لبه‌به‌لبه ویژگی‌ای در Android است که به برنامه‌ها اجازه می‌دهد با رسم کردن در پشت نوارهای سیستم Android، کل عرض و ارتفاع نمایشگر را پوشش دهند.

قبل‌از Chrome 135،‏ Chrome در Android به‌صورت لبه‌به‌لبه ترسیم نمی‌شد. این راهنما تأثیر این تغییر را بر وب‌سایت‌ها توضیح می‌دهد و اینکه شما به‌عنوان توسعه‌دهنده چه کاری می‌توانید برای پذیرش این تغییر انجام دهید.

میله‌ها در همه‌جا

Android با نوارهای سیستم ارائه می‌شود که توسط خود سیستم‌عامل ارائه می‌شوند.

نوار وضعیت، نوار عنوان، و نوار پیمایش با هم نوارهای سیستم نامیده می‌شوند. این ابزاره‌ها اطلاعات مهمی مثل سطح باتری، زمان، و هشدارهای اعلان را نمایش می‌دهند و امکان تعامل مستقیم با دستگاه را از هر جایی فراهم می‌کنند.

در بالای صفحه می‌توانید نوار وضعیت را پیدا کنید که حاوی نمادهای اعلان و نمادهای سیستم است.

تصویری از بخش بالایی دستگاه Android با نوار سیستم برجسته.
نوار وضعیت در Android برجسته شده است (منبع).

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

تصویری از قسمت پایین دستگاه Android که نوار پیمایش اشاره‌ای در آن نمایان است.
نوار پیمایش اشاره‌ای (منبع).

علاوه‌بر نوارهای سیستم Android، خود Chrome نیز نوار نشانی‌ای دارد که با پیمایش شما به‌طور پویا گسترش می‌یابد و جمع می‌شود.

Chrome تمام‌صفحه می‌شود

وقتی از وب‌سایتی بازدید می‌کنید، آن وب‌سایت در مستطیلی ارائه می‌شود که به آن نمای (چیدمان) می‌گویند.

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

تصویر دستگاه Android با Chrome در Android که لبه‌به‌لبه نیست. تصویر سمت راست Chrome را با نوار نشانی ازهم بازشده نشان می‌دهد. بین نوار نشانی و نوار پیمایش اشاره‌ای، کادری با رنگ سبز برجسته شده است که اندازه آن ۱۰۰svh است. تصویر سمت چپ Chrome را با نوار نشانی جمع‌شده نشان می‌دهد. بین نوار وضعیت و نوار پیمایش اشاره‌ای، کادری با رنگ سبز برجسته شده است که اندازه آن ۱۰۰lvh است. خود نمای دید دارای طرح کلی آبی خط‌چین است.
حداقل و حداکثر اندازه نمای هدف در Chrome در Android قبل‌از Chrome 135. این اندازه‌ها به‌عنوان نمای کوچک و بزرگ شناخته می‌شوند. خودِ نمای دید دارای خط پیرامونی آبی‌رنگ خط‌چین است.

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

تصاویری از نمای دید در Chrome در Android که لبه‌به‌لبه نیست (در سمت راست) و در Chrome در Android که لبه‌به‌لبه است (در سمت چپ). هر تجسم دارای یک جعبه آبی است که نشان‌دهنده عنصری است که اندازه آن به ارتفاع ۱۰۰vh است. نوشتار سمت راست توضیح می‌دهد که وقتی chrome لبه‌به‌لبه نباشد چه اتفاقی می‌افتد. این متن می‌گوید: «نمای دید بین نوار وضعیت بالا و نوار پیمایش اشاره‌ای پایین ثابت می‌ماند». نوشتار سمت چپ توضیح می‌دهد که وقتی chrome لبه‌به‌لبه است چه اتفاقی می‌افتد. این خطا می‌گوید «نمای گسترده به نوار پیمایش اشاره‌ای گسترش می‌یابد».
نمای بزرگ نشان‌داده‌شده در Chrome در Android که لبه‌به‌لبه نیست (چپ) و در Chrome که لبه‌به‌لبه است (راست). در Chrome با پشتیبانی لبه‌به‌لبه، وقتی نوارهای ابزار پویای Chrome جمع می‌شوند، نمای گسترده به ناحیه نوار پیمایش اشاره‌ای گسترش می‌یابد.

رفتار Chrome بدون لبه‌به‌لبه

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

رفتار قدیمی: Chrome در Android بدون پشتیبانی از لبه‌به‌لبه و https://developer.chrome.com/ بار شده است.

در اینجا، اندازه نمای چیدمان با جمع شدن یا باز شدن نوار نشانی Chrome تغییر می‌کند.

رفتار Chrome با لبه‌به‌لبه

از Chrome نسخه ۱۳۵، Chrome می‌تواند با گسترش دادن نمای اَشکال به ناحیه نوار پیمایش اشاره‌ای، محتوای وب را تا لبه پایینی دستگاه بکشد.

لبه‌به‌لبه پویا با «حاشیه پایین»

به‌طور پیش‌فرض، Chrome لبه‌به‌لبه نوار پایین پویای جدیدی را که به‌عنوان «چانه» شناخته می‌شود روی ناحیه نوار پیمایش اشاره‌ای نشان می‌دهد. درست مثل نوار نشانی Chrome، این نوار پایین صفحه با شروع پیمایش از سر راه کنار می‌رود و بر اندازه ناحیه نمایش تأثیر می‌گذارد.

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

رفتار جدید: Chrome در Android با پشتیبانی از لبه‌به‌لبه و https://developer.chrome.com/ بار شده است. توجه کنید که چگونه با پیمایش صفحه، چانه پایین از مسیر خارج می‌شود.

این رفتار نوار پایین، رفتار پیش‌فرض جدید Chrome از 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 با Chrome در Android که لبه‌به‌لبه است. تصویر سمت راست Chrome را با حاشیه پایین قابل‌مشاهده نشان می‌دهد. محتوای لنگرانداخته در پایین (به رنگ قرمز نشان داده شده است) درست در بالای آن قرار دارد. تصویر سمت چپ Chrome را نشان می‌دهد که حاشیه پایین آن قابل‌مشاهده نیست. در آنجا، محتوای لنگرانداخته در پایین در لبه پایینی دستگاه قرار می‌گیرد. نوشتار همراه آن توضیح می‌دهد که محتوای قرارگرفته در پایین اکنون توسط نوار پیمایش اشاره‌ای مسدود شده است.
تصویری از وب‌سایتی با عنصری در پایین با `bottom: 0`. وقتی چانه نمایان است، عنصر پایین بالای نوار پیمایش Android قرار می‌گیرد. وقتی حاشیه پایین جابه‌جا می‌شود، عنصر در پشت نوار پیمایش Android قرار می‌گیرد که در آن نقطه تاحدی آن را پنهان می‌کند.

برای کاهش این مشکل، از درج‌های ناحیه امن استفاده کنید تا عناصر تحت‌تأثیر همیشه بالای نوار پیمایش اشاره‌ای پایین Android-native قرار گیرند یا پس‌زمینه آن‌ها به آن ناحیه گسترش یابد.

درج‌های منطقه امن

درج‌های منطقه امن چهار متغیر محیطی هستند که مستطیلی را با درج‌های بالا، راست، پایین، و چپ آن از لبه نمای دید تعریف می‌کنند.

این چهار مقدار باهم مستطیل منطقه امن را تشکیل می‌دهند که در آن قرار دادن محتوا ایمن است تا توسط چیزهایی مانند نوار پیمایش اشاره‌ای Android مسدود نشود.

تصویری از دستگاه Android با Chrome در حالت لبه‌به‌لبه. حاشیه پایین نمای لغزشی دارد. مستطیل منطقه ایمن که به رنگ زرد است در داخل Chrome نشان داده شده است. لبه پایینی آن درست بالای نوار پیمایش اشاره‌ای قرار دارد. در نوار پیمایش اشاره‌ای، بخش پایینی نمای دید به رنگ آبی رنگ‌آمیزی شده است. نوشتار همراه آن می‌گوید که مستطیل منطقه ایمن در نمای دید با safe-area-bottom-inset درج شده است که از رنگ‌آمیزی محتوا در زیر نوار پیمایش اشاره‌ای جلوگیری می‌کند.
تصویری از Chrome در حالت لبه‌به‌لبه با نمای دید و مستطیل منطقه امن که به رنگ زرد رنگ‌آمیزی شده است. چون حاشیه پایین جمع شده است، درج پایین ناحیه امن مانع از رسیدن مستطیل ناحیه امن به نوار پیمایش اشاره‌ای می‌شود. درنتیجه، می‌بینید که نمای دید از زیر نوار پیمایش اشاره‌ای بیرون می‌زند.

استفاده از حاشیه پایین منطقه امن

برای عناصری که در پایین نمای دید قرار دارند، از 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);
}
تصویری از دستگاه Android با Chrome در حالت لبه‌به‌لبه. در تجسم سمت راست، «چانه» قابل‌مشاهده است و محتوای لنگرانداخته در پایین درست بالای آن قرار دارد. در تجسم سمت چپ، چانه قابل‌مشاهده نیست و محتوای لنگرانداخته در پایین در همان جایی قرار دارد که در سمت راست قرار دارد. این کار باعث می‌شود محتوای معمولی از زیر نوار پیمایش اشاره‌ای قابل‌مشاهده باشد.
تصویر وب‌سایتی با عنصر قرارگرفته در پایین که از حاشیه امن پایین با ویژگی bottom استفاده می‌کند. وقتی حاشیه پایین قابل‌مشاهده باشد، نوار بالای نوار پیمایش اشاره‌ای Android قرار می‌گیرد. وقتی حاشیه پایین ناپدید می‌شود، عنصر نیز بالای آن قرار می‌گیرد.

همان‌طور که در تصویر می‌بینید، نتیجه هنوز کامل نیست: وقتی حاشیه پایین از سر راه برداشته می‌شود، محتوای باقی‌مانده صفحه در ناحیه نوار پیمایش اشاره‌ای نمایان می‌شود. دلیلش این است که در این حالت، نمای دید به ناحیه نوار پیمایش اشاره‌ای گسترش می‌یابد.

برای جلوگیری از ترسیم محتوا در زیر محتوای لنگرانداخته در پایین، یک رویکرد رایج این است که padding-bottom را روی safe-area-inset-bottom تنظیم کنید. به این ترتیب، عنصر لنگرانداخته در پایین به‌طور خودکار با پنهان شدن چانه رشد می‌کند. اگرچه این روش کار می‌کند، اما توصیه نمی‌شود زیرا باعث تخریب چیدمان درحین حرکت چانه می‌شود.

padding را روی مقدار safe-area-inset تنظیم نکنید.

.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 باید با دور شدن چانه تغییر کند، هیچ‌گونه تخریب چیدمانی رخ نمی‌دهد.

تصویری از دستگاه Android با Chrome در حالت لبه‌به‌لبه. در تجسم سمت راست، «چانه» قابل‌مشاهده است و محتوای لنگرانداخته در پایین درست بالای آن قرار دارد. در تجسم سمت چپ، حاشیه پایین دیده نمی‌شود و محتوای لنگرانداخته در پایین به‌طور بصری بزرگ شده است تا فضایی را که حاشیه پایین در ابتدا اشغال کرده بود بگیرد. این کار باعث ایجاد جلوه دیداری زیبایی می‌شود و از نمایان شدن محتوای معمولی صفحه از زیر ناحیه نوار پیمایش اشاره‌ای جلوگیری می‌کند.
تصویر وب‌سایتی با عنصر لنگرانداخته در پایین که حاشیه‌های منطقه ایمن را درنظر می‌گیرد. وقتی حاشیه پایین قابل‌مشاهده است (سمت راست)، عنصر بالای حاشیه پایین قرار می‌گیرد. وقتی حاشیه پایین قابل‌مشاهده نباشد، عنصر به‌صورت بصری در نوار پیمایش اشاره‌ای Android ادغام می‌شود.

قبل‌از Chrome 135، حالت لبه‌به‌لبه را امتحان کنید

برای امتحان کردن حالت لبه‌به‌لبه قبل‌از انتشار عمومی نسخه پایدار، باید چند پرچم ویژگی Chrome را ازطریق chrome://flags فعال کنید:

  • EdgeToEdgeBottomChin (اختیاری: اگر آن را روی «اشکال‌زدایی فعال» تنظیم کنید، نیمی از چانه به رنگ صورتی درمی‌آید تا به‌وضوح از دیگر بخش‌های واسط کاربر متمایز شود)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (روی «فعال» تنظیم نکنید، بلکه روی «فعال کردن Dispatch yOffset» تنظیم کنید)
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint (روی «فعال» تنظیم نکنید، بلکه روی «نسخه قابل‌پیمایش فعال» تنظیم کنید)

مطمئن شوید پرچم‌های زیر فعال نباشند:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

‫Chrome را دو بار بازراه‌اندازی کنید.

بازخوردتان را تقاضا می‌کنیم

اگر بازخوردی درباره Chrome و پیاده‌سازی لبه‌به‌لبه آن دارید، لطفاً با ثبت اشکال Chromium در مؤلفه «رابط کاربری > مرورگر > تلفن همراه > لبه‌به‌لبه» با ما تماس بگیرید. بازخورد شما را ارج می‌نهیم.