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

Bramus

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

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

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

ברים בכל מקום

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

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

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

איור של החלק העליון של מכשיר Android עם סרגל המידע מודגש.
שורת הסטטוס ב-Android מודגשת (מקור).

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

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

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

‫Chrome מקצה לקצה

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

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

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

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

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

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

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

ההתנהגות הישנה: Chrome ב-Android בלי תמיכה בתצוגה מקצה לקצה ו-https://developer.chrome.com/ נטען.

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

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

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

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

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

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

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

ההתנהגות הזו של החלק התחתון היא התנהגות ברירת המחדל החדשה של 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 מסתיר את התוכן.

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

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

האזורים הבטוחים

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

ארבעת הערכים האלה יוצרים יחד את המלבן של האזור הבטוח, שבו אפשר להציב תוכן בלי שהוא יוסתר על ידי דברים כמו סרגל הניווט באמצעות תנועות ב-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 במצב מקצה לקצה. בתצוגה החזותית שמימין, אזור ה-Chin גלוי והתוכן שמעוגן לתחתית המסך נמצא ממש מעליו. בתצוגה החזותית בצד שמאל, החלק התחתון לא גלוי והתוכן שמעוגן לתחתית ממוקם באותו מקום כמו בצד ימין. כתוצאה מכך, התוכן הרגיל גלוי מתחת לסרגל הניווט באמצעות תנועות.
איורים של אתר עם רכיב שממוקם בתחתית ומשתמש ב-inset של האזור הבטוח בתחתית עם המאפיין 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 bottom inset וב-safe area bottom maximum inset

במקום זאת, הגישה המומלצת היא להשתמש בשילוב של 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 במצב מקצה לקצה. בתצוגה החזותית שמימין, אזור ה-Chin גלוי והתוכן שמעוגן לתחתית המסך נמצא ממש מעליו. בתצוגה החזותית שמשמאל, החלק התחתון לא מוצג והתוכן שמעוגן לתחתית גדל מבחינה חזותית כדי לתפוס את המקום שבו החלק התחתון היה במקור. כך נוצר אפקט חזותי נחמד, והתוכן הרגיל של הדף לא מוצג מתחת לאזור של סרגל הניווט באמצעות תנועות.
איורים של אתר עם רכיב שמעוגן לתחתית המסך, שמתחשב בערכי ה-inset של האזור הבטוח. כשהסנטר גלוי (משמאל), הרכיב נמצא מעל הסנטר. כשהחלק התחתון לא גלוי, הרכיב נראה כאילו הוא נכנס לסרגל הניווט באמצעות תנועות של Android.

איך מנסים את התכונה "מקצה לקצה" לפני גרסה 135 של Chrome

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

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

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

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

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

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

אם יש לכם משוב על Chrome ועל ההטמעה של התצוגה מקצה לקצה, אתם יכולים לדווח על באג ב-Chromium ברכיב "UI > Browser > Mobile > EdgeToEdge". תודה על המשוב.