מהו אזור התצוגה הווירטואלי?

ב-Chrome M40 יש שינוי קל למדי בחלון התצוגה, אבל הוא אמור להשפיע מאוד על המשתמשים.

כשדפדפנים לנייד הופיעו לראשונה, היעדר התג meta viewport גרם לדפדפנים לחשוב שלדף האינטרנט יש כ-980 פיקסלים של שטח מסך, ולעבד אותו בגודל הזה. באמצעות תג מטא של אזור תצוגה, המפתחים יכולים להגדיר את הרוחב. ההגדרה הנפוצה ביותר היא 'device-width', שמגדירה את גודל המסך לפי גודל המכשיר. מידע נוסף זמין במאמר בנושא עקרונות בסיסיים של האינטרנט.

ריק ביירס (Rick Byers) מתאר את אזור התצוגה הווירטואלי כך: הרעיון של אזור התצוגה הווירטואלי הוא לפצל את הרעיון של 'אזור התצוגה' לשניים: 'אזור התצוגה של הפריסה' (שבו מוצמדים פריטים במיקום קבוע) ו'אזור התצוגה החזותית' (מה שהמשתמשים רואים בפועל).

דוגמה פשוטה במיוחד

האתר videojs.com הוא דוגמה טובה, כי סרגל האפליקציות שלו קבוע בחלק העליון של המסך ויש בו קישורים גם בצד ימין וגם בצד ימין של סרגל האפליקציות.

בתמונה הבאה אפשר לראות מה רואים כשמגדילים את התצוגה של אתר ומנסים לזוז שמאלה וימינה.

המכשירים שבחלק העליון הם Chrome M39, שאין להם שדה ראייה וירטואלי, וה-3 שבחלק התחתון הם Chrome M40, שיש להם שדה ראייה וירטואלי.

רינדור מפוקסל.
רינדור מפוקסל.

ב-Chrome M39, שורת האפליקציות תופיע אחרי שמגדילים את התצוגה, אבל גלילה ימינה לא תאפשר לכם לראות את הקישורים בצד שמאל של השורה, תראו רק את הלוגו.

אם משווים את זה ל-Chrome M40 (שיש לו 'תצוגת מקור ויזואלית'), רואים ש'תצוגת המקור החזותית' גוללת את כל התוכן בתוך 'תצוגת המקור של הפריסה', ומאפשרת לראות את הקישורים בצד שמאל.

התנהגות כזו כבר קיימת ב-Internet Explorer, והשינויים האלה מאפשרים לנו להתקרב יותר להתנהגות הזו.

html

השינוי המשמעותי היחיד שמשפיע על המפתחים הוא שבגרסה M39 אפשר היה להחיל את overflow: hidden על רכיב ה-HTML והדף עדיין יגלול. בגרסה M40, האפשרות הזו לא נתמכת יותר, והדף פשוט לא יגלול.

מידע מוצק יותר

רוצה לקבל מידע נוסף?

אז אפשר לעיין במצגת שבהמשך.