אופן שינוי הגודל של סרגל כתובות ה-URL ישתנה ב-Chrome ל-Android החל מגרסה 56. אלה הדברים שחשוב לדעת:
אורך שמוגדר ביחידות של חלון התצוגה (כלומר vh) לא ישתנה בתגובה להצגה או להסתרה של סרגל כתובות ה-URL. במקום זאת, הגודל של יחידות vh יותאם לגובה של אזור התצוגה, כאילו שורת כתובות ה-URL תמיד מוסתרת. כלומר, הגודל של יחידות vh יותאם ל'אזור התצוגה הגדול ביותר האפשרי'. כלומר, הערך של 100vh יהיה גדול יותר מהגובה הגלוי כשסרגל כתובות ה-URL מוצג.
הבלוק המכיל הראשוני (ICB) הוא הבלוק ברמה הבסיסית שמכיל את הרכיבים, והוא משמש לקביעת הגודל של הרכיבים ביחס לרכיבי ההורה שלהם. לדוגמה, אם נותנים לאלמנט <html> סגנון width: 100%; height: 100%, הוא יהיה באותו גודל כמו ה-ICB. בעקבות השינוי הזה, גודל סרגל ה-ICB לא ישתנה כשסרגל כתובות ה-URL יהיה מוסתר.
במקום זאת, הוא יישאר באותו גובה, כאילו סרגל כתובות ה-URL תמיד מוצג ('אזור התצוגה הקטן ביותר האפשרי'). כלומר, רכיב בגודל של גובה ה-ICB לא ימלא את הגובה הגלוי במלואו בזמן שסרגל כתובות ה-URL מוסתר.
יש חריג אחד לשינויים שלמעלה, והוא לגבי רכיבים שהם position: fixed. ההתנהגות שלהם לא משתנה. כלומר, הגודל של רכיב position:
fixed שהבלוק שמכיל אותו הוא ה-ICB ישתנה בהתאם להצגה או להסתרה של סרגל כתובות ה-URL. לדוגמה, אם הגובה שלו הוא 100%, הוא תמיד ימלא בדיוק את הגובה הגלוי, בין שסרגל כתובת ה-URL מוצג ובין שלא. באופן דומה, גם אורכי vh ישתנו בהתאם לגובה הגלוי, תוך התחשבות במיקום של סרגל כתובות ה-URL.
יש כמה סיבות לשינוי הזה:
vhיחידות שניתן להשתמש בהן בנייד. לפני כן, השימוש ביחידותvhגרם לכך שהדף יתבצע שוב באופן צורם בכל פעם שהמשתמש שינה את כיוון הגלילה.חוויית משתמש משופרת. אם הדף יתבצע שוב בזמן שהמשתמש קורא, הוא עלול לאבד את המיקום היחסי שלו במסמך. זה מתסכל, אבל גם גורם לשימוש נוסף במעבד ולצריכת סוללה נוספת כדי לעצב מחדש ולצייר מחדש את הדף.
יכולת פעולה הדדית משופרת עם Safari ב-iOS. המודל החדש אמור להתאים לאופן שבו Safari פועל, וכך להקל על מפתחי האתרים. הבחירה הלא אינטואיטיבית של הגדלת חלון התצוגה של יחידות
vhככל האפשר, אבל הקטנת ICB ככל האפשר, נועדה להתאים את ההתנהגות ל-Safari.
בתרחישים של מסך מלא, שבהם סרגל כתובות ה-URL נעול למצב מוסתר, תיבת ה-ICB תשתמש בגובה המסך המלא. זה עומד בדרישות של ההגדרות שלמעלה, כי 'אזור התצוגה הקטן ביותר האפשרי' יהיה אזור התצוגה המלא, כי סרגל כתובות ה-URL לא מוצג בזמן גלילה.
הדגמה (דמו)
- הדגמה
ארבעת הסרגלים שמשמאל לדף הם כל השילובים האפשריים של
99%,99vh, position:fixedו-position:absoluteשמוצגים בדף שאפשר לגלול בו. כשמסתירים את סרגל כתובות ה-URL, אפשר לראות איך הוא משפיע על כל אחת מהן. אירועים ששונו בגודל מודפסים בתחתית הדף.
תמיכה
- Chrome 56 ב-Android.