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

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

שיתוף ב facebook
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

נשאלתי כמה פעמים מהי הדרך הכי טובה להגדיר לאזור שנבנה באלמנטור שיתפוס את כל גובה המסך. באופן מפתיע – התשובה אינה כה פשוטה.

הסבר טכני קצר

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

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

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

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

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

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

גובה אזור באלמנטור

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

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

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

אתר RAZA במובייל

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

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

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

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

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

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

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

אז יש שיטה ממש חמודה באמצעותה ניתן לדייק בגובה גם במובייל. כתב עליה לואיס הובגרטס, במגזין הידוע 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 והאזור ימתח לגובה המסך באופן המדוייק ביותר.
    הגדרת קלאס full-height
  5. כעת ניתן לבדוק את האזור גם בדסקטופ וגם במובייל, ולראות שגובהו הוא בדיוק גובה המסך:
    אזור בגובה מלא - אתר RAZA לפני ואחרי.

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

  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

שיתוף   //

שיתוף ב facebook
שיתוף ב whatsapp
שיתוף ב linkedin
שיתוף ב email

עוד באותו נושא
//

נשמח לספק לחברה שלך פתרונות מקצועיים בהתאמה אישית.

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

דילוג לתוכן