Responsive Viewer מציג את דף האינטרנט הנוכחי מרונדר במספר גדלי viewport של מכשירים זה לצד זה — הכל על מסך אחד. ראה כיצד העיצוב שלך נראה על iPhone, iPad, טלפוני Android, מחשבים ניידים ושולחניים בו-זמנית. גלול viewport אחד וכל השאר עוקבים, מה שמאפשר להשוות בקלות את אותו קטע תוכן בכל גודל מכשיר.
בדיקת עיצובים responsive באופן מסורתי פירושה שינוי גודל חלון הדפדפן או שימוש בסרגל המכשירים של DevTools כדי לעבור בין גדלי viewport אחד בכל פעם. זה עובד, אך ניתן לראות רק גודל אחד בכל פעם — מה שהופך לבלתי אפשרי להשוות כיצד קטע נראה על mobile לעומת desktop בו-זמנית. Responsive Viewer פותר זאת על ידי רינדור הדף במספר viewport בו-זמנית, המוצגים זה לצד זה על המסך שלך. בחר מפרופילי מכשירים מוגדרים מראש (iPhone 15, iPad Pro, Pixel 8, MacBook, שולחן עבודה 1440p) או הזן מימדים מותאמים אישית. כל viewport הוא מופע מרונדר במלואו של הדף, לא צילום מסך סטטי — גלול אחד וכל האחרים גוללים לאותו מיקום. גלילה מסונכרנת זו מאפשרת להשוות את אותו אזור תוכן מדויק בכל גדלי המכשירים במבט אחד. זוהי הדרך המהירה ביותר לאתר בעיות responsive: ניווט שנמחץ בצורה שגויה, תמונות שגולשות מהמיכלים שלהן, טקסט שהופך לבלתי קריא על מסכים קטנים, או ריווח שמתמוטט בצורה מגושמת.
ראה את הדף הנוכחי מרונדר בו-זמנית במספר גדלי viewport המוצגים זה לצד זה על המסך שלך. השווה פריסות mobile, tablet ו-desktop במבט אחד מבלי לעבור בין תצוגות. כל viewport הוא רינדור פונקציונלי במלואו של הדף.
בחר מספרייה של הגדרות מכשירים פופולריות: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) ו-Full HD Desktop (1920×1080). ההגדרות מעודכנות במימדי המכשירים הנוכחיים.
הזן כל רוחב וגובה מותאם אישית לבדיקת גדלי viewport לא סטנדרטיים. צריך לבדוק כיצד הדף נראה ברוחב מדויק של 768px (ה-breakpoint הנפוץ לטאבלט)? פשוט הקלד אותו. ניתן להוסיף מספר viewport מותאמים אישית לצד ההגדרות המוגדרות מראש.
גלול viewport אחד וכל האחרים גוללים לאותו מיקום אנכי. זה מאפשר להשוות את אותו קטע תוכן מדויק בכל גדלי המכשירים בו-זמנית — ראה כיצד אזור ה-hero, טבלת המחירים, או ה-footer מרונדרים על mobile, tablet ו-desktop.
כל viewport מוצג בתוך מסגרת מכשיר ריאליסטית — מסגרות טלפון, גבולות טאבלט, chrome למחשב נייד. ההקשר החזותי עוזר לבעלי עניין להבין איזה viewport מייצג איזה מכשיר במהלך סקירות ומצגות.
הפעל והשבת מכשירים בודדים כדי להתמקד בהשוואות גדלים ספציפיות. משווה רק mobile ו-desktop? בטל את בחירת הגדרות ה-tablet. צריך לראות רק iPhone? בטל את בחירת כל השאר. שליטה מלאה על אילו viewport גלויים.
לאחר יישום עיצוב responsive, השתמש ב-Responsive Viewer כדי לוודא שכל קטע נראה נכון בכל גדלי המכשירים הנדרשים. תפוס גלישת טקסט, בעיות קנה מידה של תמונות, בעיות כיווץ ניווט וחוסר עקביות בריווח — הכל בתצוגה אחת.
הצג ללקוחות כיצד האתר שלהם נראה בכל המכשירים במהלך פגישת סקירה. התצוגה זה לצד זה היא אינטואיטיבית מיד — אין צורך להסביר מושגי viewport. הלקוחות יכולים לראות mobile, tablet ו-desktop בו-זמנית.
רואה פריסה שנשברת ברוחב ספציפי? הוסף viewport מותאם אישית ברוחב ה-pixel המדויק שבו מתרחשת הבעיה והשווה אותו מול viewport רחבים וצרים יותר במעט כדי לזהות איזה CSS breakpoint גורם לבעיה.
בדוק אם כותרות ארוכות נמחצות נכון על mobile, אם טבלאות נתונים הופכות לגלילות על מסכים קטנים, אם שדות טפסים גדולים מספיק ללחיצה, ואם CTA נשארים גלויים ונגישים בכל גדלי המכשירים.
השתמש בתצוגה הרב-מכשירית ליצירת תמונות תצוגת עיצוב responsive מרשימות. צלם מסך של ה-Responsive Viewer המציג את העיצוב שלך על 3-4 גדלי מכשירים למצגות תיקיית עבודה.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל ה-Responsive Viewer. הדף עובר למצב viewport מרובה עם מסגרות מכשירים המוצגות זה לצד זה.
סרגל המכשירים בחלק העליון מציג את ההגדרות הזמינות (iPhone, iPad, Pixel, MacBook, Desktop). לחץ על מכשירים כדי להפעיל אותם או להשבית אותם. מכשירים נבחרים מופיעים כ-viewport למטה.
לחץ על כפתור "Custom" והזן מימדי רוחב × גובה ספציפיים כדי להוסיף viewport מותאם אישית. שימושי לבדיקת ערכי breakpoint מדויקים כמו 768px, 1024px, או 1280px.
גלול כל viewport — כל האחרים עוקבים לאותו מיקום. השווה כיצד אותו קטע נראה בכל גדלי המכשירים הנבחרים בו-זמנית.
לחץ שוב על סמל ה-Responsive Viewer או על כפתור הסגירה כדי לצאת ממצב viewport מרובה ולחזור לתצוגת הדף הרגילה.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
