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

Bramus

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

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

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

توجه: تغییر در Chrome 135 دستگاه‌های صفحه‌نمایش کوچک را هدف قرار می‌دهد. Chrome در Android که روی دستگاه‌های صفحه‌نمایش بزرگ اجرا می‌شود در حال حاضر مستثنی است و در نسخه‌های بعدی Chrome با آن مقابله خواهد شد.

توجه: این ویژگی با استفاده از یک Chrome Variation ارائه می‌شود. بنابراین ممکن است آن را در نسخه قبلی کروم مشاهده کنید.

همه جا بارها

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

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

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

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

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

نوار پیمایش ژست ( منبع ).

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

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

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

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

حداقل و حداکثر اندازه نمای در کروم در اندروید قبل از کروم 135. این اندازه ها به عنوان نمای کوچک و بزرگ شناخته می شوند. نمای خود دارای یک طرح کلی آبی است.

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

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

توجه: Chrome در iOS با انتشار iOS 11.3 پشتیبانی لبه به لبه را اضافه کرد. توصیه‌های این راهنما برای Chrome در حال اجرا در iOS نیز اعمال می‌شود.

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

ضبط زیر 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;
}

هنگامی که چانه وجود دارد، محتوا در ابتدا برای کاربران قابل دسترسی خواهد بود، اما با از بین رفتن چانه توسط نوار ناوبری اندروید مسدود می شود.

تصویر یک وب سایت با عنصر پایین با «پایین: 0». هنگامی که چانه قابل مشاهده است، عنصر در موقعیت پایین بالای نوار ناوبری اندروید قرار می گیرد. هنگامی که چانه دور می شود، عنصر در پشت نوار ناوبری اندروید قرار می گیرد که تا حدی آن را در آن نقطه مبهم می کند.

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

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

Browser Support

• 69
• 79
• 65
• 11

Source

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

ترکیب این چهار مقدار، مستطیل ناحیه ایمن را تشکیل می دهد که در آن می توان محتوا را ایمن قرار داد تا با مواردی مانند نوار ناوبری حرکتی 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); /* 🛑 Don't do this, as it causes layout thrashing. */
}

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

با استفاده از قسمت پایینی قسمت ایمن و حداکثر ورودی قسمت پایینی ایمن

در عوض، رویکرد توصیه شده استفاده از ترکیبی از 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));
}

یک نسخه نمایشی زنده را امتحان کنید

توجه: مقدار بازگشتی 36px برای safe-area-max-inset-bottom برای ارائه مرورگرهایی انتخاب شده است که از safe-area-max-inset-bottom پشتیبانی نمی‌کنند. این مقدار به این دلیل انتخاب شد که Safari در iOS در حالت Single Tab دارای حداکثر افست پایین 36px در حالت عمودی است.

مهم: کروم دارای بهینه‌سازی‌های کد است – یک مسیر به اصطلاح سریع – زمانی که calc(env(safe-area-inset-bottom, …) +/- …); الگوی این مسیر سریع به محتوای لنگر پایین اجازه می‌دهد تا در حالی که چانه از مسیر خارج می‌شود، همراه با چانه حرکت کند.

نتیجه بصری همان padding-bottom: env(safe-area-inset-bottom, 0px); رویکرد اما عملکرد بسیار بهتری دارد. از آنجایی که تنها مقدار محاسبه شده برای bottom باید با دور شدن چانه تغییر کند، هیچ گونه کوبیدن چیدمان رخ نمی دهد.

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

توجه: حداکثر ورودی‌های ناحیه امن ( safe-area-max-inset-bottom و دوستان) در Chrome 135 در دسترس هستند.

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