החל מגרסה 56, התנהגות שינוי הגודל של סרגל כתובות ה-URL משתנה ב-Chrome ב-Android. הנה כמה דברים שחשוב לדעת:
אורך שמוגדרים ביחידות של אזור התצוגה (כלומר vh) לא ישתנה בתגובה לסרגל של כתובות ה-URL שיוצג או מוסתר. במקום זאת, הגודל של יחידות vh ייקבע לפי גובה אזור התצוגה כאילו שסרגל כתובות ה-URL תמיד מוסתר. כלומר, הגודל של vh יחידות יהיה לפי 'אזור התצוגה הגדול ביותר'. כלומר, הערך 100vh יהיה גדול יותר מהגובה הגלוי כששורת כתובת ה-URL מוצגת.
ה-Initial Containing Block (ICB) הוא הרמה הבסיסית (root) שמכילה את הבלוק שבו משתמשים כדי לקבוע את הגודל של רכיבים ביחס לההורים שלהם. לדוגמה, אם נותנים לרכיב <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.