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

Bramus

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

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

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

ברים בכל מקום

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

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

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

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

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

המסך ב-Chrome מוצג מקצה לקצה

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

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

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

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

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

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

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

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

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

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

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

ההתנהגות הזו של הסנטר היא ברירת המחדל החדשה של Chrome החל מגרסה 135.

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

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

דף יכול לציין שהוא תומך בתצוגה מקצה לקצה באמצעות מטא תג viewport והמפתח viewport-fit שלו.

כדי להפעיל את התכונה 'מקצה לקצה', מגדירים את הערך של viewport-fit ל-cover.

<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /

מידע נוסף על הערכים השונים של viewport-fit ב-MDN

איך מתמודדים עם תוכן שסרגל הניווט באמצעות מחוות עלול להסתיר

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

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

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

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

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

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

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

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

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

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

כדי למנוע את הצגת התוכן מתחת לתוכן שמוצמד לתחתית, אחת הגישות הנפוצות היא להגדיר את 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 כשהסנטר מתרחק, לא מתרחש layout thrashing.

התנסות בתצוגה מקצה לקצה לפני Chrome 135

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

• ‫EdgeToEdgeBottomChin (אפשר להגדיר את האפשרות 'הפעלה של ניפוי באגים'. במקרה כזה, חצי מהסנטר יהיה בצבע ורוד כדי להבדיל אותו בצורה ברורה יותר מרכיבים אחרים בממשק המשתמש)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor (don't set to "Enabled" but set to "Enabled Dispatch yOffset")
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• ‫EdgeToEdgeSafeAreaConstraint (לא מגדירים כ'מופעל', אלא כ'מופעלת גרסה עם אפשרות גלילה')

חשוב לוודא שההגדרות הבאות לא מופעלות:

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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