האתר נשבר בטלפון? 7 בדיקות רספונסיביות למפתחים צעירים
במחשב הכרטיסים עומדים בשורה מושלמת. בטלפון הכפתור נעלם, התמונה דוחפת את העמוד הצדה והכותרת נחתכת. במקום להוסיף תיקוני CSS אקראיים, נחקור את התקלה כמו באג שאפשר למדוד.
״במחשב זה עובד״ אינו סוף הבדיקה
- נצפה
- במסך צר מופיע פס גלילה אופקי והכפתור האחרון יוצא מהתצוגה.
- השערה
- אחד הכרטיסים דורש רוחב מינימלי גדול יותר מרוחב החלון.
- הוכחה שנחפש
- האלמנט שחורג, כלל ה-CSS שיוצר את החריגה ובדיקה חוזרת אחרי שינוי קטן.
רספונסיביות אינה ״גרסת טלפון״ נפרדת. זו היכולת של אותה מערכת תוכן להתארגן מחדש כשהמקום משתנה.
HTML עדיין מגדיר את המבנה, CSS קובע כיצד המבנה נראה ו-JavaScript מוסיף אינטראקציה. התקלה יכולה להופיע רק ברוחב מסוים מפני שכללי הפריסה, התוכן והמדיה נפגשים שם בצורה אחרת. לכן מתחילים משחזור ומדידה, בדיוק כמו בכל תהליך דיבאגינג מסודר.
חומרי ה-JavaScript שנמסרו למכללה כוללים HTML למבנה, CSS לעיצוב, JavaScript לאינטראקציה, בניית אתרים ומשחקי דפדפן, קריאת קוד ושימוש בקונסולה. הפרטים כאן נשענים על יסודות ווב יציבים ואינם תיאור מחייב של תוכנית לימודים נוכחית.
שבע בדיקות, מהסימפטום ועד חוויית השימוש
לא חייבים לבצע את כולן בכל תקלה. עוברים לפי הסדר ועוצרים כשיש ראיה ברורה שמקשרת בין כלל CSS לבין מה שרואים במסך.
- 01
משחזרים לפני שמתקנים
באיזה רוחב התקלה מתחילה?
פותחים את כלי הפיתוח, מצרים את התצוגה לאט ורושמים את הרוחב שבו הכרטיסים נחתכים או מופיעה גלילה אופקית. צילום אחד ורוחב מדויק עדיפים על המשפט ״זה לא עובד במובייל״.
- 02
מודדים את המסמך
האם התוכן רחב יותר מהחלון?
משווים בין scrollWidth לבין clientWidth של המסמך. אם המספר הראשון גדול יותר, אלמנט כלשהו יוצא מהגבול. המדידה מאשרת שיש גלישה, אך עדיין צריך למצוא מי גורם לה.
- 03
מחפשים רוחב קשיח
האם רכיב דורש יותר מקום ממה שיש?
רוחב כמו 700px יכול להתאים למחשב ולהיות רחב ממסך קטן. בדרך כלל עדיף max-width יחד עם width: 100%, או יחידה גמישה שמאפשרת לרכיב להתכווץ.
- 04
בודקים Grid ו-Flexbox
האם העמודות יודעות להישבר?
שלוש עמודות קבועות אינן הופכות אוטומטית לעמודה אחת. בודקים breakpoint מתאים, flex-wrap, וב-Grid משתמשים בעמודות גמישות. לעיתים גם min-width פנימי מונע כיווץ.
- 05
מגבילים מדיה
האם תמונה, וידאו או Canvas חורגים?
נכס חזותי שומר לעיתים על המידות המקוריות שלו. max-width: 100% ו-height: auto שומרים תמונה בתוך ההורה. ל-Canvas או iframe צריך להגדיר מעטפת רספונסיבית במפורש.
- 06
מאתגרים את הטקסט
מה קורה עם URL, קוד או מילה ארוכה?
טקסט עברי רגיל נשבר בין מילים, אבל כתובת ארוכה או שורת קוד עלולות להרחיב כרטיס. מחליטים אם לשבור את המחרוזת, לגלול בתוך אזור הקוד או לקצר את התצוגה בלי לאבד מידע.
- 07
בודקים שימוש, לא רק רוחב
האם עדיין אפשר לקרוא, ללחוץ ולנווט?
עמוד יכול להיכנס למסך ועדיין להיות לא נוח: טקסט זעיר, כפתורים צפופים ותפריט שמסתיר תוכן. עוברים עם מקלדת, לוחצים על הקישורים ובודקים גם מצב אנכי וגם שינוי גודל.
תיקון קטן צריך להסביר למה הוא עובד
נניח שכרטיס קיבל רוחב קבוע של 680 פיקסלים. מסך צר לא יכול לכווץ אותו, ולכן המסמך מתרחב. המעבר לרוחב גמיש נותן לכרטיס למלא את המקום הזמין, אבל לא לעבור את הגבול שתכננו למסך רחב.
לא מסתירים את הבעיה בעזרת overflow-x: hidden על כל הדף. הסתרה כזאת יכולה לחתוך תוכן בלי לתקן את הרכיב שיצא מהמסגרת.
Before · fixed width
.card {
width: 680px;
}After · flexible with a limit
.card {
width: 100%;
max-width: 680px;
}breakpoint שייך לתוכן, לא לדגם טלפון
קל לחפש רשימה של רוחבי מכשירים ולהעתיק מספר. הבעיה היא שהעמוד אינו יודע איזה מכשיר פתח אותו; הוא מקבל רק אזור תצוגה. גם חלון מוקטן במחשב, טאבלט במצב מפוצל או טלפון מסובב יכולים להגיע לרוחב דומה.
לכן מצרים את העמוד עד שהפריסה מפסיקה לשרת את התוכן, מסמנים את הנקודה הזאת ורק אז כותבים media query. אם התוכן משתנה בעתיד, חוזרים לבדיקה; breakpoint הוא החלטת פריסה, לא מספר קדוש.
הכרטיס מאבד צורה
הכותרת נשברת לשורות קצרות מאוד, הכפתור נדחק או שהתמונה משאירה מעט מדי מקום לטקסט.
הניווט מפסיק להיות ברור
הקישורים עוברים לשורה מבולגנת או מכסים פעולה אחרת. זה סימן לשנות מבנה, לא רק להקטין גופן.
הקריאה נהיית מעייפת
במסך רחב מדי שורות הטקסט נמתחות; במסך צר מדי רכיבים סמוכים נלחצים. breakpoint יכול להגן על שני המצבים.
אותו סימפטום, ארבע חקירות שונות
| מה רואים | במה חושדים | איך מחפשים הוכחה |
|---|---|---|
| כל העמוד גולל לצדדים | רכיב רחב, margin שלילי או תוכן שלא נשבר | מאתרים אלמנט שהקצה שלו עובר את רוחב המסמך |
| רק טבלה או קוד גוללים | תוכן שבאמת זקוק לרוחב נוסף | המסמך נשאר ברוחב החלון והגלילה מוגבלת למעטפת |
| כרטיסים נמחצים | יותר מדי עמודות או min-width קשיח | משנים זמנית לעמודה אחת ובודקים אם הקריאות חוזרת |
| תמונה נחתכת | מידות קבועות או object-fit לא מתאים | בודקים את גבולות התמונה ואת גבולות ההורה בכל יחס מסך |
במובייל הטבלה אמורה לגלול בתוך המסגרת שלה. אם כל העמוד זז הצדה, זו כבר תקלה אחרת.
לא בודקים מכשיר אחד; בודקים התנהגות בין רוחבים
רשימת דגמי טלפון לעולם לא תהיה שלמה. בדיקה טובה מצרה ומרחיבה את החלון ברצף, ואז עוצרת בשלושה מצבים שמייצגים שינוי אמיתי בפריסה. כך מגלים נקודת שבירה ולא רק מצלמים מסך מוצלח.
רוחב צר
לגלות גלישה, צפיפות וסדר תוכן בעמודה אחת.
האם אפשר לקרוא ולהגיע לכל פעולה בלי לגרור הצדה?
רוחב ביניים
לבדוק את הרגע שבו הפריסה מחליפה מספר עמודות.
האם המעבר קורה לפני שהתוכן נהיה צפוף?
רוחב רחב
לוודא שהשורות אינן ארוכות מדי ושהחלל מנוצל היטב.
האם התוכן נשאר ממוקד במקום להימתח מקצה לקצה?
משימת 20 דקות: מצאו את נקודת השבירה הראשונה
פתחו פרויקט קיים, הרחיבו והצרו את התצוגה עד שמשהו משתנה לרעה. רשמו רוחב, סימפטום והשערה; שנו כלל CSS אחד בלבד; ואז בדקו שוב ברוחב צר, ביניים ורחב. התוצר החשוב הוא לא רק עמוד מתוקן, אלא הסבר קצר שמקשר בין הבעיה, הראיה והתיקון.