איך לתקן באג בעיצוב רספונסיבי בלי גישה למכשיר הלקוח

לקוח מתקשר ואומר: "האתר נראה שבור אצלי על ה־ Samsung Galaxy S24 Ultra".

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

הייתי חייב למצוא דרך לראות איך האתר נראה במכשיר שאני לא יכול להחזיק ביד ומהר. הנה איך שפתרתי את זה.

שלב 1: תיבת דיבוג צפה (גרסה ראשונה)

מדביקים את קוד ה-JavaScript הבא בתוך קובץ סקריפט או ה־body של דף האינטרנט כדי לראות: רוחב, גובה, DPR (צפיפות פיקסלים), ו־User Agent.

window.addEventListener("DOMContentLoaded", () => {
    const box = document.createElement("div");
    box.id = "debug-modal";
    box.style = `
      direction: ltr;
      text-align: left;
      position: fixed;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.85);
      color: white;
      font-family: monospace;
      font-size: 13px;
      padding: 15px;
      border-radius: 10px;
      z-index: 9999;
      max-width: 90vw;
      line-height: 1.5;
      direction: ltr;
    `;
    box.innerHTML = `
      <strong>Debug Info</strong><br>
      Width: ${window.innerWidth}px<br>
      Height: ${window.innerHeight}px<br>
      DPR: ${window.devicePixelRatio}<br>
      UA:<br><code>${navigator.userAgent}</code>
    `;
    document.body.appendChild(box);
  });

נכנסים לדף האינטרנט כדי לראות את הפרטים הספציפיים של המכשיר.

שלב 2: עדכון אוטומטי גם בשינוי אוריינטציה

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

function updateDebugBox() {
    const box = document.getElementById("debug-modal");
    if (!box) return;
    box.innerHTML = `
      <button onclick="box.remove()" style="
        position: absolute; top: 5px; right: 10px;
        background: #ff6666; border: none; color: white;
        font-weight: bold; border-radius: 4px; padding: 2px 6px;">×</button>
      <strong>Debug Info</strong><br>
      Width: ${window.innerWidth}px<br>
      Height: ${window.innerHeight}px<br>
      DPR: ${window.devicePixelRatio}<br>
      Orientation: ${screen.orientation?.type || "N/A"}<br>
      UA:<br><code>${navigator.userAgent}</code>
    `;
  }

  window.addEventListener("DOMContentLoaded", () => {
    const box = document.createElement("div");
    box.id = "debug-modal";
    box.style = `position: fixed; top: 10px; right: 10px;
                 background: rgba(0,0,0,0.85); color: white;
                 font-family: monospace; font-size: 13px;
                 padding: 15px; border-radius: 10px; z-index: 9999;
                 max-width: 90vw; line-height: 1.5; direction: ltr;`;
    document.body.appendChild(box);
    updateDebugBox();
  });

  window.addEventListener("resize", updateDebugBox);
  window.addEventListener("orientationchange", updateDebugBox);

שלב 3: מדמים את המכשיר בדפדפן המחשב האישי באמצעות Chrome DevTools

1. פותחים את כל הפיתוח של הדפדפן (Ctrl+Shift+I) בשביל לעשות אימולציה
2. לוחצים על אייקון המכשיר
3. מהתפריט בוחרים להוסיף מכשיר: Edit → Add Custom Device
4. מוסיפים מכשיר. לדוגמה, את Samsung S24 Ultra עם הנתונים הבאים:

Width 360
Height 780
DPR  4
UA …
Mobile

מהדרופ של בחירת המכשירים בוחרים את המכשיר החדש, מרפרשים, ורואים את מה שהלקוח רואה.

שלב 4: שאילתות media query לעיצוב רספונסיבי נפוצות

/* Mobile - portrait */
@media (max-width: 480px) { }

/* Mobile - landscape */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) { }

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) { }

/* Full screen desktop */
@media (min-width: 769px) { }

/* High resolution screens (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { }

/* Dark mode */
@media (prefers-color-scheme: dark) { }

לסיכום

• השתמשו בתיבת דיבוג כדי לראות את המכשיר בעיניים של הלקוח.
• תעשו אימולציה של כל מכשיר באמצעות Chrome DevTools כולל DPR ו־UA.
• תתחילו את יישום העיצוב מהנייד Mobile First ואל תשכחו לבדוק על כמה מכשירים/רזולוציות.
• 360 פיקסלים זה לא "צר". זה הרוחב הסטנדרטי ברוב מכשירי הדגל.

לכל מדריכי ה-CSS3

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים