איך למנוע מהמקלדת הווירטואלית במובייל לשבור את ה-UI שלכם ב-2026

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

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

לפני: טופס קלאסי שנשבר כשפותחים מקלדת

במשך שנים, ברירת המחדל של דפדפנים כמו Chrome או Safari בעת פתיחת מקלדת הייתה פשוטה ואכזרית: כיווץ ה-Viewport.

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

הגדרה · Visual Viewport vs Layout Viewport

ה-Layout Viewport הוא שטח הקנווס לפיו נתרמים האלמנטים בעמוד. ה-Visual Viewport הוא האזור שעין המשתמש רואה בפועל על המסך הפיזי, בניכוי מקלדות וזום.

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

התוצאה: נטישת טופס.

אחרי: ממשק יציב וזורם

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

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

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

איך לבצע את המעבר: הגדרת interactive-widget

פתרון הבסיס הנגיש ביותר ב-2026 מגיע ישירות מתג המטא של ה-viewport. אין צורך בספריות JavaScript כבדות.

אנחנו מוסיפים את הפרמטר interactive-widget להגדרת ה-viewport ב-HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

הפרמטר מקבל שלוש ערכים אפשריים:

• resizes-visual: המקלדת משנה רק את ה-Visual Viewport. ה-Layout Viewport נשאר ללא שינוי. אלמנטים קבועים לא קופצים.
• resizes-content: המקלדת מכווצת את ה-Layout Viewport. זו ברירת המחדל הישנה בחלק מהדפדפנים.
• overlays-content: המקלדת צפה לחלוטין מעל התוכן מבלי לשנות אף viewport.

בחירה ב-resizes-visual מונעת מיד את קפיצת האלמנטים המודבקים לתחתית.

השלב הבא: שליטה מלאה עם Virtual Keyboard API

לפעמים אנחנו רוצים לדעת בדיוק כמה פיקסלים המקלדת תופסת כדי לרפד את הטופס בצורה דינמית. כאן נכנס לתמונה ה-Virtual Keyboard API.

אני משתמש ב-JavaScript כדי להגדיר לדפדפן שהמקלדת מנהלת את עצמה:

if ('virtualKeyboard' in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;
}

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

.form-container {
  padding-bottom: env(keyboard-inset-height, 0px);
}

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

סיכום

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

💡

אל תתנו לדפדפן לנחש איך להתמודד עם מקלדת. הגדירו interactive-widget במטא-תג והשתמשו ב-env(keyboard-inset-height) כדי לייצר חוויית גלישה יציבה.