הכינו אתרכם לאייפון X

האייפון X יוצא ממש עוד מעט, ואיתו אפל בחרה לעשות למפתחי האתרים לא מעט כאב ראש. לראשונה קצוות המסך מעוגלים ובראש המכשיר, בין שני חלקי המסך, הוצבו הרשמקול, המצלמה והחיישנים.
הדבר גורם לכך שתוכן עלול להיות מוסתר על ידי קצוות המסך המעוגלים והחיישנים, ולכן אפל בחרה להציג כברירת מחדל את תוכן האתר בין האיזורים הבטוחים (safe areas) של המכשיר.

לצורך הפוסט יצרתי אתר לדוגמה, כך הוא נראה במצב אופקי במכשיר האייפון 8:

הכל עובד כצפוי והאתר נראה מהמם. ועכשיו נעבור לבדוק את האתר באייפון X:

אוי לא! מה קרה כאן? החלק מחוץ לאזורים הבטוחים התמלא ברקע שהוגדר על אלמנט ה- html או ה- body ותוכן האתר מורכז בין שני האזורים מימין ומשמאל – בניגוד להתנהגות הרגילה בה התוכן מתפרס על פני כל שטח המסך.
זה עשוי להתאים לחלק מהאתרים (כמו הדף שאתם קוראים בו עכשיו, בו צבע הרקע לאורך כל העמוד אחיד) אבל כמו שניתן לראות בדוגמה למעלה, הדבר עלול לגרום לעיצוב האתר להראות ״קטוע״.

מתלבשים על כל המסך

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

ערך ברירת המחדל ל- viewport-fit הוא auto, שכפי שראינו מקודם משאיר את התוכן באזורים הבטוחים של המכשיר. אם נרצה להציג את תוכן הדף על פני כל המסך, נוכל לשנות את הערך ל- cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

לאחר השינוי נקבל את התוצאה הבאה:

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

זהירות מוקשים

על מנת לפתור את הבעיות הללו נוצרו ארבעה משתנים, שניתן לגשת אליהן דרך ה- CSS בעזרת פונקציית ()env. המשתנים הם:

  • safe-area-inset-left
  • safe-area-inset-right
  • safe-area-inset-top
  • safe-area-inset-bottom
האיזורים הבטוחים והלא בטוחים באייפון X. נלקח מהבלוג הרשמי של WebKit.

בעזרת המשתנים נוכל להוסיף padding / margin לתוכן שלנו על מנת להגיע לאיזורים הבטוחים של המכשיר.

main {
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

footer {
  padding-bottom: env(safe-area-inset-bottom);
}

הידד! כעת אנחנו מציגים את תוכן האתר בצורה ברורה, ה- footer נגיש ואין בעיה לגשת למסך הבית.

משנים כיוון

אך מה יקרה אם נחזיק את המכשיר בצורה אנכית?

כפי שניתן לראות, אין יותר מרווח בין קצוות המסך לתוכן. הסיבה היא שהגדרנו מחדש את ה- padding של אלמנט התוכן עם משתנה. ערך המשתנה הוא דינאמי לפי המצב בו המכשיר מוחזק, ולכן כשעברנו למצב אנכי ערך המשתנה safe-area-inset-right עבר להיות 0.

ניתן לפתור את הבעיה הזו בעזרת 2 פונקציות CSS חדשות: min ו- max.
הפונקציות לוקחות 2 משתנים ומחזירות את הערך הגדול / הקטן מבין שניהם.

הפונקציות הנ״ל נתמכות מגרסת iOS 11.2.

@supports(padding: max(0px)) {
  main {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }
}

כעת, כשנחזיק את המכשיר במצב אופקי, ערך ה- padding שיוחל יהיה ערך המשתנה, וכשנחזיק את המכשיר במצב אנכי הערך יהיה 12px.

לסיכום…

אחרי שהבנו את כל השינויים שצריך לבצע על מנת להתאים אתר לאייפון X, רציתי לציין שלדעתי המהלך הזה שאפל ביצעה אינו נכון, ואנחנו, מפתחי האתרים, לא צריכים לעודד או לתמוך בהתאמת אתרים למכשירים ספציפיים. עם זאת, ראיתי את המקרה הזה כמעניין, ונחמד לדעת איך פותרים בעיה שכזו. בנוסף, כן צריך לחשוב על התאמת האתר במידה והאתר פופולארי או מקבל תנועה גדולה ממשתמשים עם אייפון X.