התנהגות שינוי הגודל של סרגל כתובות ה-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.