בנובמבר, עם השקת Chrome 108, יתבצע ב-Chrome מספר שינויים באופן הפעולה של אזור התצוגה של הפריסה כשהמקלדת שמופיעה במסך (OSK). בעקבות השינוי הזה, Chrome ל-Android לא ישנה יותר את הגודל של אזור התצוגה בפריסה, אלא רק את הגודל של אזור התצוגה החזותית. כך ההתנהגות של Chrome ב-Android תהיה זהה לזו של Chrome ב-iOS ושל Safari ב-iOS.
ריכזנו כאן מידע על מה שקורה, על הסיבה לשינוי הזה ב-Chrome ועל מה שאפשר לעשות כדי להתכונן.
אזור התצוגה של הפריסה ואזור התצוגה החזותי
כשנכנסים לאתר, לא רואים את כל תוכן הדף אחרי שהוא נטען. במקום זאת, הדפדפן מציע לכם חלון תצוגה שבו אתם יכולים לראות חלק מהדף. חלון התצוגה הזה נקרא גם חלון תצוגה של פריסה. כשתוכן הדף גדל מדי, הדפדפן מציע מנגנון גלילה.
כשממקמים רכיבים באמצעות position: fixed, הם יוצגו ביחס למסך התצוגה של הפריסה. כשגוללים למטה בדף, אזור התצוגה של הפריסה נשאר במקום, וכך גם רכיבים שמשתמשים ב-position: fixed.
position: fixed (תיבות כחולות). בתמונה מוצגים (משמאל לימין) Safari ב-iPhone, Chrome ב-Android ו-Firefox ב-Android.
בנוסף לאזור התצוגה של הפריסה, בדפדפן יש גם אזור תצוגה חזותי. הוא מייצג את החלק של אזור התצוגה שגלוי כרגע. ברמת זום 1, אזור התצוגה החזותית זהה בגודל לאזור התצוגה של הפריסה.
כשמשתמשים בתנועת הצמדה כדי להתקרב, הגודל של אזור התצוגה החזותי מצטמצם ביחס לאזור התצוגה בפריסה.
התנהגות של שינוי גודל של נקודת מבט
כשממקדים קלט או כל אזור אחר שאפשר לערוך, במכשירים – בעיקר במכשירים עם מסך מגע – עשויה להופיע מקלדת במסך. המקלדת הזו, שנקראת בדרך כלל מקלדת וירטואלית,מאפשרת למשתמשים להזין תוכן באזור שניתן לעריכה.
כשהדפדפנים עושים זאת, הם מגיבים באחת מהדרכים הבאות ביחס למסכי התצוגה השונים:
- שינוי הגודל של אזור התצוגה החזותי בלבד והזזה של אזור התצוגה בפריסה.
- משנים את הגודל של אזור התצוגה החזותי ושל אזור התצוגה בפריסה.
- אין לשנות את הגודל של אזור התצוגה בפריסה או של אזור התצוגה החזותית, ולהציב את המקלדת הווירטואלית מעל שניהם.
שלושת ההתנהגויות האלה מוצגות באופן חזותי באופן הבא:
בהתאם לשילוב של הדפדפן ומערכת ההפעלה שבהם משתמש מבקר, אחת מהתנהגויות השימוש היא שאינה בשליטתך.
מיפוי של התנהגויות השונות של שינוי הגודל
במסגרת החקירה של חלון התצוגה – חלק מ-Interop 2022 – נבדקו היבטים שונים שקשורים לחלון התצוגה, בכל שילוב עיקרי של דפדפן ומערכת הפעלה.
אחד מההיבטים שנבדקים הוא התנהגות שינוי הגודל כשמוצגת ה-OSK. מה שהוביל לסיווג הבא:
קבוצה ראשונה
דפדפנים שמשנים את הגודל של אזור התצוגה החזותי, משאירים ללא שינוי את אזור התצוגה של הפריסה.
- Safari ב-iOS
- Safari ב-iPadOS
- Chrome ב-Chrome OS
- Chrome ב-iOS
- Chrome ב-iPadOS
- Edge ב-iOS
- Edge ב-iPadOS
קבוצה שנייה
דפדפנים שמגדילים או מצמצמים את גודל אזור התצוגה החזותי ואת גודל אזור התצוגה בפריסה.
- Chrome ב-Android
- Firefox ב-Android
- Edge ב-Android
- Firefox ב-iOS
קבוצה שלוש
דפדפנים שלא משנים את הגודל של אף אחד מאזורי התצוגה:
- אף אחת מהאפשרויות כברירת מחדל – ב-Chrome ב-Android אפשר להביע הסכמה להתנהגות הזו באמצעות Virtual Keyboard API
תופעות הלוואי של כל התנהגות
ההבדל הזה באופן שבו משנים את הגודל של חלונות התצוגה השונים כשה-OSK מוצג מוביל לכך שהפריסה וההתנהגות של הגודל של אתרים לא תואמים זה לזה.
בדפדפנים מקבוצה 1, כשה-OSK מוצג:
- הערכים המחושבים של יחידות ביחס למסך נשארים ללא שינוי.
- רכיבים שתוכננו למלא את כל המרחב החזותי יישמרו באותו גודל.
- רכיבים שמשתמשים ב-
position: fixedנשארים במקום ויכול להיות שהם יהיו מוסתרים על ידי מקלדת OSK.
בדפדפנים מקבוצה 2, כשה-OSK מוצג:
- הערכים המחושבים של יחידות ביחס למסך קטנים.
- רכיבים שתוכננו למלא את כל המרחב החזותי יתכווצו.
- רכיבים שמשתמשים ב-
position: fixedיכולים להופיע במקום אחר בפריסת האתר.
position: fixed (תיבות כחולות). בתמונה מוצגים Safari ב-iOS (משמאל) ו-Chrome ב-Android (במרכז ובצד ימין).
אם לא משתמשים בסוכני משתמש לסריקת סוכנים או מסתמכים על כתיבת סקריפטים נרחבת, לא תוכלו לדעת באיזו התנהגות נעשה שימוש. בנוסף, אי אפשר לשנות את ההתנהגות כי היא נקבעת על סמך השילוב של הדפדפן ומערכת ההפעלה שמהם המשתמש מבקר באתר.
שינוי של התנהגות ברירת המחדל ב-Chrome 108
החל מגרסה 108 של Chrome, Chrome ל-Android ישנה את התנהגות שינוי הגודל של אזור התצוגה כך שלא ישנה יותר את גודל אזור התצוגה בפריסה כשהקלדת במסך מוצגת.
כך ההתנהגות של Chrome ב-Android תהיה זהה לזו של Chrome ב-iOS, ב-iPadOS, ב-Windows וב-CrOS, של Safari ב-iOS וב-iPadOS ושל Edge ב-iOS, ב-iPadOS וב-Windows.
בעקבות השינוי הזה, המחברים יכולים לדעת באיזו התנהגות המערכת תשתמש, לא משנה באיזו מערכת הפעלה Chrome פועל. בנוסף, היא מאפשרת להציג יחידות יציבות ביחס למסך: הצגה או הסתרה של המקלדת שמופיעה במסך לא משפיעות על היחידות האלה.
הבעת הסכמה להתנהגות אחרת
אם אתם רוצים שהאתר שלכם ישתמש בהתנהגות של שינוי הגודל לפני גרסה 108, אין בעיה. ב-Chrome 108 יש גם תוסף למטא-תג של אזור התצוגה.
באמצעות המקש interactive-widget, אפשר להורות ל-Chrome איך לשנות את הגודל.
הערכים הקבילים של interactive-widget הם:
resizes-visual: שינוי הגודל של אזור התצוגה החזותי בלבד אבל לא של אזור התצוגה של הפריסה.resizes-content: שינוי הגודל של אזור התצוגה החזותי ושל אזור התצוגה של הפריסה.overlays-content: אין לשנות את הגודל של שום חלון תצוגה.
כדי לחזור להתנהגות 'הישנה' של Chrome ב-Android, מגדירים את המטא תג של חלון התצוגה כך:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
אם לא תכללו את הערך interactive-widget במטא תג של אזור התצוגה, Chrome ישתמש בהתנהגות ברירת המחדל, שהיא resizes-visual.
כך ההגדרות משפיעות על חלונות התצוגה השונים:
resizes-visual, resizes-content ו-overlays-content.
אתם יכולים לבדוק את ההשפעה של כל ערך בדפדפן שלכם באתר הדגמה הזה.
בדיקה ומשוב
אנחנו צופים הבדלים קלים באתרים קיימים, אבל הם לא אמורים לחסום את הגישה לאתרים האלה, כי Chrome 108 ב-Android יפעל עכשיו באופן דומה ל-Safari ב-iOS. לכן, אתרים שפועלים בצורה תקינה ב-Safari ב-iOS אמורים לפעול בצורה תקינה גם ב-Chrome 108 ב-Android.
עם זאת, אנחנו ממליצים לכותבי אתרים לבדוק באופן פעיל את האתרים שלהם ב-Chrome 108, שיהיה בגרסת בטא החל מ-27 באוקטובר 2022. חשוב לחפש במיוחד אלמנטים שמשתמשים ב-position: fixed ו/או מסתמכים על יחידות יחסיות למסך.
אפשר לשלוח משוב בכתובת crbug.com. חשוב לכלול את המילים 'מקלדת במסך' בכותרת הדוח.