راهنمای انتقال لبه به لبه Chrome در اندروید، راهنمای انتقال لبه به لبه Chrome در Android، راهنمای مهاجرت لبه به لبه Chrome در Android، راهنمای مهاجرت لبه به لبه Chrome در Android

تاریخ انتشار: 28 فوریه 2025

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

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

همه جا بارها

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

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

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

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

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

تصویر قسمت پایین یک دستگاه Android با نوار پیمایش حرکتی قابل مشاهده است.
نوار پیمایش ژست ( منبع ).

علاوه بر نوارهای سیستم اندروید، خود کروم دارای یک نوار آدرس است که به صورت پویا گسترش می‌یابد و با اسکرول کردن خود را جمع می‌کند.

کروم لبه به لبه می رود

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

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

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

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

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

رفتار کروم بدون لبه به لبه

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

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

در اینجا، با جمع شدن یا بزرگ شدن نوار آدرس کروم، اندازه نمای طرح بندی تغییر می کند.

رفتار کروم با لبه به لبه

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

لبه به لبه پویا با "چانه"

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

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

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

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

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

ناحیه امن وارد می شود

Browser Support

  • کروم: 69.
  • لبه: 79.
  • فایرفاکس: 65.
  • سافاری: 11.

Source

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

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

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

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

برای عناصری که در پایین درگاه نمایش قرار دارند، از 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" با ما تماس بگیرید. ما از بازخورد شما قدردانی می کنیم.