מדריך להעברה מקצה לקצה ב-Chrome ל-Android

Bramus

תאריך פרסום: 28 בפברואר 2025

'מקצה לקצה' היא תכונה של Android שמאפשרת לאפליקציות להשתרע על כל רוחב המסך וגובהו על ידי ציור מאחורי סרגלי המערכת של Android.

לפני Chrome 135, התצוגה של Chrome ב-Android לא הייתה מקצה לקצה. במדריך הזה נסביר מהי ההשפעה של השינוי הזה על אתרים, ומה מפתחים יכולים לעשות כדי להתאים את עצמם לשינוי.

הערה: השינוי ב-Chrome 135 מתמקד במכשירים עם מסך קטן. בשלב הזה, Chrome ל-Android שפועל במכשירים עם מסך גדול לא נכלל. הבעיה הזו תטופל בגרסה עתידית של Chrome.

הערה: התכונה הזו מושקת באמצעות גרסה משתנה של Chrome. לכן יכול להיות שתראו אותו בגרסה קודמת של Chrome.

ברים בכל מקום

מערכת Android מגיעה עם סרגל מערכת שמסופק על ידי מערכת ההפעלה עצמה.

שורת הסטטוס, שורת הכותרת וסרגל הניווט נקראים יחד 'סרגי המערכת'. הם מציגים מידע חשוב כמו רמת הטעינה של הסוללה, השעה והתראות, ומאפשרים אינטראקציה ישירה עם המכשיר מכל מקום.

בחלק העליון של המסך מופיעה שורת הסטטוס, שמכילה סמלי התראות וסמלי מערכת.

שורת הסטטוס ב-Android מודגשת (source).

בתחתית המסך מופיע סרגל הניווט, שמאפשר לשלוט בניווט באמצעות לחצני החזרה, דף הבית והסקירה הכללית. זה יכול להיות סרגל הניווט הקלאסי עם שלושה לחצנים או סרגל הניווט המודרני עם תנועות.

סרגל הניווט באמצעות תנועות (source).

בנוסף לסרגלי המערכת של Android, ב-Chrome יש סרגל כתובות שמתרחב ונסגר באופן דינמי בזמן הגלילה.

Chrome מלא מסך

כשאתם מבקרים באתר, האתר מוצג במלבן שנקרא אזור התצוגה (פריסת המסך).

ב-Chrome ל-Android, לפני Chrome 135, אזור התצוגה של הפריסה הזה מצויר בין שורת הסטטוס העליונה לבין סרגל הניווט באמצעות תנועות התחתון. נוכחות סרגל הכתובות של Chrome (או היעדרותו) יכולה להשפיע על גודל אזור התצוגה, אבל אזור התצוגה לעולם לא יתרחב אל סרגל המערכת העליון או אל סרגל הניווט התחתון באמצעות תנועות.

הגודל המינימלי והמקסימלי של אזור התצוגה ב-Chrome ל-Android לפני גרסה 135 של Chrome. הגדלים האלה נקראים 'אזור צפייה קטן' ו'אזור צפייה גדול'. אזור התצוגה עצמו מוקף בקו מתאר כחול מקווקו.

החל מגרסה 135 של Chrome, ניתן להרחיב את אזור התצוגה לסרגל הניווט באמצעות תנועות ב-Android. זוהי ההתנהגות שמתוארת בתור מקצה לקצה.

חלון התצוגה הגדול שמוצג ב-Chrome ל-Android ולא מלא את המסך (משמאל) וב-Chrome מלא את המסך (מימין). ב-Chrome עם תמיכה בתצוגה מקצה לקצה, אזור התצוגה מתרחב לאזור של סרגל הניווט באמצעות תנועות כשסרגי הכלים הדינמיים של Chrome נשלפים.

הערה: התמיכה במסך מלא ב-Chrome ל-iOS נוספה עם השקת iOS 11.3. ההמלצות במדריך הזה רלוונטיות גם ל-Chrome שפועל ב-iOS.

התנהגות Chrome ללא תצוגה מקצה לקצה

בסרטון הבא מוצג Chrome ב-Android ללא תמיכה במסך מלא. סרגל הכתובות של Chrome (בחלק העליון) נעלם באופן דינמי כשגוללים בדף. עם זאת, שורת הסטטוס העליונה וסרגל הניווט התחתון, שנוצרו במיוחד ל-Android, נשארים במקומם.

התנהגות הקודמת: Chrome ב-Android ללא תמיכה במסך מלא, ו-https://developer.chrome.com/ נטען.

כאן, גודל אזור התצוגה של הפריסה משתנה כאשר סרגל הכתובות של Chrome מתכווץ או מתרחב.

ההתנהגות של Chrome בתצוגה מקצה לקצה

החל מגרסה 135 של Chrome, Chrome יכול להציג תוכן אינטרנט עד לקצה התחתון של המכשיר על ידי הרחבת אזור התצוגה לאזור של סרגל הניווט באמצעות תנועות.

דינמי מקצה לקצה עם 'הסנטר'

כברירת מחדל, ב-Chrome במסך מלא מוצג סרגל תחתון דינמי חדש שנקרא 'הסנטר' מעל אזור סרגל הניווט באמצעות תנועות. בדומה לסרגל הכתובות של Chrome, החלק הזה נעלם כשמתחילים לגלול ומשפיע על גודל אזור התצוגה.

בסרטון הבא של Chrome ב-Android עם תמיכה במסך מלא, סרגל הכתובות של Chrome והחלק התחתון של המסך נכנסים באופן דינמי כשהדף גוללים למטה. הפעולה הזו גורמת לחלון התצוגה להרחיב, וכך תוכן האינטרנט מוצג עד לקצה התחתון של המכשיר.

התנהגות חדשה: Chrome ב-Android עם תמיכה מלאה במסך וטעינה של https://developer.chrome.com/. שימו לב איך החלק התחתון של המסך נעלם כשגוללים בדף.

התנהגות הצ'ין הזו היא התנהגות ברירת המחדל החדשה של Chrome מגרסה 135 ואילך.

מעבר למסך מלא כברירת מחדל עם הסכמה

אתרים שנוצרו לתצוגה מקצה לקצה יכולים לציין זאת על ידי שינוי של מטא התג viewport. כשהאפשרות הזו מופעלת, אזור התצוגה יתרחב עד לקצה התחתון כברירת מחדל, בלי שהחלק התחתון של המסך (הצוואר) יהיה גלוי.

התנהגות חדשה עם הסכמה לתצוגה מקצה לקצה: אזור התצוגה (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 כשהצוואר ייעלם.

איור של אתר עם רכיב שממוקם בתחתית עם 'bottom: 0'. כשהסנטר גלוי, הרכיב שממוקם בתחתית נמצא מעל סרגל הניווט של Android. כשהסנטר מתרחק, האלמנט ממוקם מאחורי סרגל הניווט של Android, שמסתיר אותו חלקית בשלב הזה.

כדי לצמצם את ההשפעה, אפשר להשתמש בהכנסות של האזור הבטוח כדי למקם תמיד את הרכיבים המושפעים מעל סרגל הניווט התחתון של תנועות האנדרואיד, או כדי שהרקע שלהם ירחיב לאזור הזה.

הקטעים הפנימיים של האזור הבטוח

Browser Support

• 69
• 79
• 65
• 11

Source

הקצאות האזור הבטוח הן ארבעה משתני סביבה שמגדירים מלבן לפי הקצאות העליון, הימני, התחתון והשמאלי שלו מקצה אזור התצוגה.

ארבעת הערכים האלה, בשילוב, יוצרים את המרובע של האזור הבטוח שבו אפשר למקם תוכן בבטחה, כך שהוא לא ייחסם על ידי דברים כמו סרגל הניווט באמצעות תנועות ב-Android.

איור של 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);
}

איורים של אתר עם רכיב שנמצא בתחתית המסך, שמשתמש בחלק התחתון של אזור הבטיחות באמצעות נכס 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);
}

חשוב: כדי למנוע נסיגה בביצועים, 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 במצב כרטיסייה יחידה יש סטייה מקסימלית של 36px בתחתית המסך במצב לאורך.

חשוב: כש-Chrome מזהה את התבנית calc(env(safe-area-inset-bottom, …) +/- …);, הוא מבצע אופטימיזציה של הקוד – שנקרא נתיב מהיר. הנתיב המהיר הזה מאפשר לתוכן שמקובע לתחתית המסך לזוז יחד עם הסנטר בצורה יעילה בזמן שהסנטר זז החוצה.

התוצאה החזותית זהה לגישה padding-bottom: env(safe-area-inset-bottom, 0px);, אבל הביצועים שלה טובים בהרבה. מכיוון שרק הערך המחושב של bottom צריך להשתנות כשהסנטר מתרחק, לא מתרחש טרישה של הפריסה.

איורים של אתר עם רכיב שמקובע לתחתית הדף, תוך התחשבות בהוספות של האזור הבטוח. כשהסנטר גלוי (שמאל), האלמנט ממוקם מעל הסנטר. כשהחלק התחתון של המסך לא גלוי, הרכיב משולב באופן חזותי בסרגל הניווט באמצעות תנועות של Android.

הערה: האפשרות להוסיף את הקטעים המקסימליים של האזור הבטוח (safe-area-max-inset-bottom וחברים) זמינה מגרסת Chrome 135 ואילך.

איך בודקים את התצוגה מקצה לקצה לפני Chrome 135

כדי לנסות את התכונה 'מלא מסך' לפני שהיא תשוחרר באופן רשמי, צריך להפעיל כמה דגלים של תכונות Chrome דרך chrome://flags:

• EdgeToEdgeBottomChin (אפשר להגדיר את האפשרות 'Enabled Debug' (הפעלת ניפוי באגים) כדי לצבוע חצי מהסנטר בצבע ורוד, כדי להבדיל אותו בבירור מממשקי משתמש אחרים)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor (לא מגדירים את הערך 'מופעל', אלא מגדירים את הערך 'Enabled Dispatch yOffset')
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint (לא מגדירים את הערך 'מופעל', אלא מגדירים את הערך 'גרסה מופעלת שניתן לגלול בה')

מוודאים שהדגלים הבאים לא מופעלים:

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

מפעילים מחדש את Chrome פעמיים.

נשמח לקבל ממך משוב.

אם יש לכם משוב על Chrome ועל ההטמעה שלו במסך מלא, אתם יכולים לשלוח דיווח על באג ב-Chromium ברכיב 'ממשק משתמש > דפדפן > נייד > EdgeToEdge'. תודה על המשוב.