בנובמבר, עם השקת 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 אפשר להביע הסכמה להתנהגות הזו באמצעות VirtualKeyboard 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. חשוב לכלול את המילים 'מקלדת במסך' בכותרת הדוח.