איך להשתמש בו
- פתחו את הדף. הערכים נקראים מהדפדפן שלכם מיד.
- שנו את גודל החלון או סובבו את המכשיר כדי לראות את גודל אזור התצוגה והכיוון מתעדכנים.
- השתמשו ב״העתק הכל״ כדי להדביק את הפרטים בדוח תקלה או בפנייה לתמיכה.
איך זה עובד
דפדפנים מדווחים גדלים בפיקסלי CSS, היחידה שדפי אינטרנט משתמשים בה לפריסה. בתצוגות בצפיפות גבוהה פיקסל CSS אחד מצויר באמצעות כמה פיקסלים פיזיים: יחס פיקסלי המכשיר (DPR) מציין כמה. טלפון שמדווח 390 × 844 עם DPR של 3 כולל פאנל של כ-1170 × 2532 פיקסלי מכשיר. במחשב שולחני, תקריב הדפדפן ושינוי קנה המידה של מערכת ההפעלה משנים שניהם את ה-DPR ואת גודל ה-CSS, כך שצג 2560 × 1440 בקנה מידה של 125% מדווח 2048 × 1152.
רזולוציית המסך היא כל התצוגה; השטח הזמין אינו כולל סרגלים קבועים של מערכת ההפעלה כמו שורת המשימות של Windows או שורת התפריטים של macOS; אזור התצוגה (viewport) הוא החלק בחלון הדפדפן שבו הדף מוצג, ללא סרגלי כלים אך כולל כל פס גלילה. אזור התצוגה הוא מה ששאילתות מדיה של CSS כמו min-width: 768px מגיבות אליו, ולכן זהו המספר שיש לבדוק בעת בדיקת פריסות רספונסיביות.
ערכי ערכת הצבעים והעדפת התנועה המופחתת מגיעים מאותן תכונות מדיה של CSS שאתרים משתמשים בהן כדי להתאים את עצמם להגדרות המערכת שלך. מותגים, פלטפורמה ונייד מגיעים מ-User-Agent Client Hints, שרק דפדפנים מבוססי Chromium מספקים. חלק מהדפדפנים מעגלים או מקבעים ערכים אלה בכוונה כדי לצמצם טביעת אצבע דיגיטלית, כך שייתכן שהם אינם תואמים בדיוק לחומרה שלך.
דוגמאות
בדיקת פריסה רספונסיבית
פריסה נשברת במחשב הנייד של עמית. הם מעתיקים את הפרטים, שמראים אזור תצוגה של 1280 × 649 עם DPR של 1.5. הגדירו את סרגל כלי המכשיר של הדפדפן לאותו אזור תצוגה כדי לשחזר את הבעיה.
בחירת גדלי תמונות
תמונת מוצר מוצגת ברוחב 400 פיקסלי CSS. בטלפון עם DPR של 3 היא צריכה 1200 פיקסלים כדי להיראות חדה, וזה אומר לך אילו גדלים לכלול ב-srcset.
בדיקת קנה המידה של הצג
צג 3840 × 2160 מדווח 2560 × 1440 עם DPR של 1.5: Windows משנה את קנה המידה של התצוגה ב-150%.
שאלות נפוצות
מדוע רזולוציית המסך שונה מהמפרט של הצג שלי?
הדפדפנים מדווחים פיקסלי CSS, שהם הפיקסלים הפיזיים חלקי מקדם ההגדלה. הכפילו ביחס הפיקסלים של המכשיר כדי לקבל ערך קרוב לרזולוציית החומרה. גם הזום בדפדפן משנה את הערך המדווח.
מה ההבדל בין גודל מסך לגודל אזור התצוגה (viewport)?
גודל המסך הוא כל התצוגה. אזור התצוגה (viewport) הוא רק האזור שבתוך חלון הדפדפן שבו הדף מצויר, ולכן הוא קטן יותר ומשתנה כשמשנים את גודל החלון או פותחים כלי פיתוח.
האם המידע הזה משמש למעקב אחרי?
לא בדף הזה: הערכים מוצגים רק לכם ואינם נשמרים או נשלחים לשום מקום. אתרים יכולים לקרוא את אותם ערכים, ולכן חלק מהדפדפנים מעגלים אותם כדי להקשות על טביעת אצבע דיגיטלית.
מדוע מוצגת תמיכת מגע במחשב הנייד שלי?
תמיכת המגע מבוססת על מספר נקודות המגע שהדפדפן מדווח. מחשבים ניידים עם מסך מגע מדווחים עליהן גם אם אתם משתמשים בעיקר בעכבר, ויש מנהלי התקנים או הגדרות שולחן עבודה מרוחק שמדווחים על תמיכת מגע ללא מסך מגע.
פרטיות
כל הערכים נקראים באמצעות JavaScript בדפדפן שלכם ומוצגים רק לכם. שום דבר אינו נשמר, מועלה או נכלל בניתוחי נתונים; נרשם רק אירוע אנונימי שהכלי נפתח ונעשה בו שימוש.