התאמה של אזור באלמנטור לגובה מלא של מסך המובייל

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

הסבר טכני קצר

יש ב-CSS דרך להתייחס לגובה ולרוחב המסך: יחידות בשם vh (Viewport height) ו- vw (Viewport width). יחידת vh אחת היא 1/100 מגובה המסך. יחידת vw אחת היא 1/100 מרוחב המסך. כלומר, אם נרצה אזור שנמתח על כל גובה המסך, הוא יצטרך לתפוס 100vh. חצי מגובה המסך? 50vh!

איך זה בא לידי ביטוי באלמנטור?

לכאורה, ניתן להגדיר לאזור באלמנטור "גובה: מותאם למסך", שמאחורי הקלעים מגדירה לאזור height: 100vh, אך זו אפשרות בעייתית מאוד, כיוון שהיא מגדירה את גובה האזור באופן מוחלט, מה שעלול ליצור בעיות במקרה שכמות התוכן באזור חורגת, במסך מסויים, מגובה המסך. במצב כזה, התוכן שגולש יוסתר, וזה – לא נחמד.

לכן אני לעולם לא משתמש ב"גובה: מותאם למסך" ומתקשה לחשוב על תרחיש בו הגיוני להשתמש דווקא בו.

במקום לבחור ב"מותאם למסך" אני בוחר ב"גובה מינימלי", בוחר ביחידות ה-vh, ומגדיר את הגובה המינימלי ל-100vh. מה שיפה באפשרות הזאת שהיא לא מגדירה את גובה האזור, אלא את הגובה המינימלי שלו (min-height: 100vh), ולכן אם התוכן חורג במסך מסויים מגובה המסך, האזור ימתח על מנת להכיל את כל התוכן.

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

אבל זה לא נגמר כאן…

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

נסו ותגלו שאזור שהוגדר לו 100vh, והוא האזור הראשון בדף, תופס במובייל יותר מגובה המסך, כלומר, צריך לגלול מעט על מנת לראות את כולו.

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

אבל אם אתם פדנטים (או, כמוני, עם קווים של OCD), יכול להיות שתרצו קצת יותר. אחרי הכל, התאמה מושלמת למובייל אינה מותרות – שם רוב המשתמשים שלכם נמצאים. לא מוכנים לוותר? אל דאגה – פשוט המשיכו לקרוא.

הבעייה, הפיתרון והבעיה שהפיתרון יוצר

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

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

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

איך להשיג גובה מדוייק במובייל?

כאן מגיע החלק הערוך – זה שהוספתי ב2024. ניתן להגדיר היום יחידת מידה חכמה שמדוייקת לגובה המסך גם במובייל. יחידת המידה הזאת נקראת svh. התמיכה בsvh כרגע (2024) די טובה אבל בהחלט לא מלאה, כשעיקר הבעייה היא עם FireFox. כך נשתמש בה:

1. נגדיר לאזור (או לקונטיינר) את הקלאס full-height :
   
2. נכניס את חוק ה-CSS הזו לתבנית (לקובץ CSS, לאזור CSS מותאם ב"התאמה אישית", ל Custom CSS של אלמנטור וכו'):

   
   .full-height .elementor-container, .e-con-full.full-height, .e-con.full-height > .e-con-inner {
        	 min-height: calc(100vh - 60px);/* Fallback */
   	 min-height: calc(100svh - 60px);
   }

   החוק הזה כולל שתי הצהרות: Fallback לדפדפנים ישנים – הגדרת הגובה המינימלי כ-100vh קלאסי, ואחריו ההצהרה של הגובה המינימלי עם svg
   כתבתי גם מאמר על איך להוסיף CSS לאתר שנבנה באלמנטור. יתכן שתמצאו אותו מועיל להבנת השלב הזה בתהליך.

3. שימו לב שיש בדוגמת הקוד הזאת את ה 60px – זה כדי להדגים מצב שבו יש גם header שאנחנו רוצים להוריד מהחישוב, והגובה שלו הוא 60px. אתם צריכים להתאים את המספר הזה למצב שלכם – להגדיל, להקטין או אפילו להפוך ל 0px (כדי שהאזור באמת יתפוס את כל גובה המסך)
4. כעת ניתן לבדוק את האזור גם בדסקטופ וגם במובייל, ולראות שגובהו הוא בדיוק גובה המסך. זה הכל!
   

המדריך המקורי – גובה מדוייק בעזרת סקריפט

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

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

1. נגדיר לאזור באלמנטור "גובה: גובה מינימלי" ונשאיר את התיבה ריקה (בלי לציין מהו הגובה המינימלי הרצוי)
2. נכניס את הסקריפט הבא (באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):

   
   <script>
       function calculateVh() {
           let vh = window.innerHeight * 0.01;
           document.documentElement.style.setProperty('--vh', `${vh}px`);
       }
   calculateVh();
   </script>
   

   הסקריפט הזה שומר במשתנה JS בשם vh את גובה המסך (בפיקסלים) חלקי 100, ואז מגדיר ל-document (כלומר לתגית ה-HTML) משתנה CSS בשם –vh עם הערך של vh.
   במאמר המקורי, מציע לואיס הובגרטס לעדכן את הערך של המשתנה vh כאשר גודל המסך משתנה. אני דווקא לא אוהב את הרעיון הזה, ולכן הקוד כאן הוא בלעדיו. אם אתם דווקא בעד – העתיקו את הקוד מהמאמר המקורי.

3. נכניס את חוק ה-CSS הזו לתבנית (לקובץ CSS או לאזור CSS מותאם ב"התאמה אישית" וכו'):

   
   .full-height .elementor-container {
        min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
        min-height: calc(var(--vh, 1vh) * 100);
   }

   החוק הזה כולל שתי הצהרות: Fallback לדפדפנים ישנים – הגדרת הגובה המינימלי כ-100vh קלאסי, ואחריה ההצהרה של הגובה המינימלי כחישוב של המשתנה –vh X 100.
   כתבתי גם מאמר על איך להוסיף CSS לאתר שנבנה באלמנטור. יתכן שתמצאו אותו מועיל להבנת השלב הזה בתהליך.

4. כעת נוכל להגדיר לאזור את הקלאס full-height והאזור ימתח לגובה המסך באופן המדוייק ביותר.
   
5. כעת ניתן לבדוק את האזור גם בדסקטופ וגם במובייל, ולראות שגובהו הוא בדיוק גובה המסך:
   

שתי הערות קטנות

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

הגדרת גובה אזור שמחשבת גם את גובה ה-HEADER

לפעמים נרצה שהכותרת העליונה של האתר (Header) והאזור שמתחתיה יתפסו יחד את כל גובה המסך. נעשה זאת ע"י הוספת עוד גורם לחישוב. בדוגמה זו גובה הכותרת העליונה הוא 80 פיקסלים בדסקטופ ו-58 פיקסלים במובייל, ולכן מחסרים מגובה האזור הראשון 80 פיקסלים, ובמובייל – 58. תוכלו, כמובן, לשנות את הערך בהתאם לגובה הכותרת העליונה שיצרתם.

.full-height .elementor-container {
   min-height: 100vh; /* Fallback */
   min-height: calc((var(--vh, 1vh) * 100) - 80px);
}
@media(max-width:767px) {
   .full-height .elementor-container {
       min-height: calc((var(--vh, 1vh) * 100) - 58px);
    }
}

לסיכום

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

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

לקריאה נוספת

The trick to viewport units on mobile