למה 100vh הורס לכם את אתר המובייל ב-2026 (ואיך dvh פותר את זה)

בשנה האחרונה עברתי על עשרות אתרים של עסקים וחברות בתל אביב. ראיתי שוב ושוב את אותן 5 טעויות CSS בפיתוח למובייל — טעויות שגורמות למסך לקפוץ, לכפתורים להיעלם ולגולשים לנטוש.

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

הנה 5 הטעויות הנפוצות ביותר שפוגשות אותי בשטח — ואיך לתקן אותן ברגע.

הגדרה · Dynamic Viewport Units

יחידות מידה ב-CSS (כמו dvh, svh, lvh) המותאמות דינמית לגובה המסך האמיתי במכשירים ניידים, תוך התחשבות בהופעה או היעלמות של סרגלי הדפדפן.

טעות #1: להסתמך על 100vh בשביל מסך ה-Hero במובייל

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

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

💡

100vh במובייל לא שווה ל-100% מגובה המסך הגלוי. הוא תמיד גבוה יותר, ודוחק כפתורים קריטיים אל מתחת למסך.

איך מתקנים?

החליפו את 100vh ב-100dvh (Dynamic Viewport Height). יחידה זו מתאימה את עצמה בזמן אמת לגובה הגלוי של המסך.

.hero {
  /* Fallback לדפדפנים ישנים */
  height: 100vh; 
  /* הפתרון המודרני */
  height: 100dvh; 
}

טעות #2: בחירה שגויה בין svh, lvh ו-dvh

הרבה מפתחים שומעים על יחידות ה-Viewport החדשות ומחליפים באופן עיוור את כל ה-vh בפרויקט ל-dvh. זו שגיאה.

קיימות שלוש יחידות שונות, ולכל אחת תפקיד מוגדר:

אם תגדירו תפריט קופץ (Modal) עם 100dvh, בכל פעם שהמשתמש יזיז מעט את האצבע, התפריט ישנה את גובהו ויצור תחושת ריצוד מרגיזה.

טעות #3: יצירת תזוזות תוכן (CLS) בגלל שינויי גובה תכופים

תזוזות תוכן בלתי צפויות (Cumulative Layout Shift) הן סיוט למשתמשים ולמנועי חיפוש כאחד.

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

איך מתקנים?

השתמשו ב-dvh רק באלמנט העטיפה הראשי (Main Container) או במסך הפתיחה. עבור תוכן פנימי, השתמשו באחוזים (100%) או ב-svh.

טעות #4: התעלמות מדפדפנים בתוך אפליקציות (In-App Browsers)

פתחתם קישור מתוך אינסטגרם, טיקטוק או לינקדאין? מזל טוב, אתם גולשים בתוך WebView.

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

/* הטריק של המקצוענים למניעת בעיות ב-WebView */
.full-screen-element {
  min-height: 100vh;
  min-height: 100svh;
}

שימוש ב-min-height במקום height מונע מהתוכן להיחתך אם הסרגל הפנימי של האפליקציה תופס מקום גדול מהצפוי.

טעות #5: שכפול קוד מיותר בלי קסקייד נכון

ראיתי מפתחים שכותבים מנגנוני JavaScript מורכבים שמחשבים את window.innerHeight ומעדכנים משתנה CSS ב-Resize.

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

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

אם יש דבר אחד שכדאי לקחת מהמאמר הזה לפרויקט הבא שלכם: עברו ל-dvh במסכי Hero ו-svh במודאלים.

💡

פשטות מנצחת: שורת CSS אחת של 100dvh מחליפה 30 שורות של JavaScript ישן ומבטיחה שהכפתור שלכם לא ייעלם לעולם באייפון.