רזולוציית מסך
רזולוציה, גודל חלון ו‑Pixel Ratio
מה ההבדל בין רזולוציה לגודל חלון?
רזולוציית מסך היא כמות הפיקסלים הפיזית של הצג. גודל החלון (Viewport) הוא השטח שהדפדפן מקצה לעמוד — קטן יותר בגלל סרגלי כלים, ומשתנה כשמקטינים את החלון. כשבונים אתר רספונסיבי, ה‑Viewport הוא מה שקובע.
מה זה Device Pixel Ratio?
במסכי Retina ובטלפונים מודרניים כל "פיקסל CSS" מורכב מ‑2 או 3 פיקסלים פיזיים. אייפון עם רוחב 390px CSS מציג בפועל 1170 פיקסלים. לכן תמונות צריכות להיות כפולות בגודלן כדי להיראות חדות — ובדיוק בגלל זה כדאי לדחוס אותן, אחרת המשקל מכפיל את עצמו גם הוא.
נקודות שבירה נפוצות
- מובייל: עד 640px
- טאבלט: 641–1024px
- מחשב: 1025px ומעלה
שאלות נפוצות
מה ההבדל בין רזולוציית המסך לגודל החלון?
רזולוציית המסך היא כמות הפיקסלים הפיזית של הצג ולא משתנה. גודל החלון, ה-Viewport, הוא השטח שהדפדפן מקצה לעמוד — קטן יותר בגלל סרגלי כלים ופסי גלילה, ומשתנה כשמשנים את גודל החלון. כשבונים אתר רספונסיבי, ה-Viewport הוא מה שקובע, לא הרזולוציה.
מה זה Device Pixel Ratio?
היחס בין פיקסלים פיזיים לפיקסלי CSS. במסכי Retina ובטלפונים מודרניים כל פיקסל CSS מורכב מ-2 או 3 פיקסלים פיזיים. אייפון ברוחב 390 פיקסלי CSS מציג בפועל 1170 פיקסלים — ולכן תמונה ברוחב 390 תיראה מטושטשת עליו, וצריך להגיש אותה בכפול.
באילו נקודות שבירה כדאי להשתמש?
הגישה המקובלת: מובייל עד 640 פיקסלים, טאבלט 641 עד 1024, ומחשב 1025 ומעלה. אבל אל תעצבו לפי מכשירים ספציפיים — עדיף להרחיב את החלון בהדרגה ולהוסיף נקודת שבירה בדיוק במקום שבו העיצוב מתחיל להיראות רע. זו שיטה שמזדקנת הרבה יותר טוב.
למה המספרים משתנים כשאני מזיז את החלון?
כי הם נמדדים בזמן אמת. גודל החלון והכיוון מתעדכנים בכל שינוי, ואפילו יחס הפיקסלים משתנה כשגוררים חלון בין מסך רגיל למסך Retina, או כשמשנים את מרחק התצוגה בדפדפן.
איך אני יודע איזו רזולוציה לתכנן לפיה?
לא מנחשים — בודקים. ב-Google Analytics תחת קהל יש פילוח לפי גודל מסך של הגולשים שלכם בפועל. בישראל 2026 רוב התנועה היא מובייל ברוחב 360 עד 430 פיקסלי CSS, אבל אצל אתר B2B התמונה יכולה להיות הפוכה לגמרי.
הנתונים האלה נשלחים לכם?
לא. הכל נקרא מאובייקטים screen ו-window של הדפדפן ומוצג מקומית. שום נתון לא עוזב את המכשיר שלכם.