הדגמה
- כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen
(מסך מלא). - כדאי לטעון מחדש את הדף במכשירים שונים כדי לראות שהדפדפן טוען תמונות שונות.
אפשר להשתמש למטרה הזו במהנת המכשיר. אם אתם מחפשים צפיפות תצוגה ספציפית, הנה כמה מכשירים שאפשר לנסות:
| צפיפות 1x | Blackberry Playbook, many external monitors |
| צפיפות כפולה | iPad או iPhone 5/6 |
| צפיפות פי 3 | Galaxy S5 או iPhone X |
- אפשר לבדוק את הקוד שמאפשר את הפעולה הזו ב-
index.html.
איך זה עובד?
רוב האנשים לא מכירים את המושג 'תיאורי צפיפות'. כדי להבין אותם טוב יותר, כדאי שיהיה קצת רקע על אופן הפעולה של הדפדפן עם פיקסלים.
מהם פיקסלים
נתחיל בהתחלה בהגדרה של פיקסל. זה נשמע פשוט, אבל ל'פיקסל' יכולות להיות הרבה משמעויות:
- פיקסל במכשיר (נקרא גם 'פיקסל פיזי')
- הנקודה הקטנה ביותר של צבע שאפשר להציג במכשיר.
- פיקסל לוגי
- מידע שמציין את הצבע במיקום מסוים בתוך רשת. לפיקסלים מהסוג הזה אין גודל פיזי מובנה.
- פיקסל של CSS
- מפרט ה-CSS מגדיר פיקסל כיחידת מידה פיזית. פיקסל אחד = 1/96 אינץ'.
צפיפות פיקסלים
דחיסות הפיקסלים (שנקראת גם 'צפיפות המסך' או 'צפיפות המסך') היא המדד של צפיפות הפיקסלים במכשיר באזור פיזי נתון. בדרך כלל היא נמדדת בפיקסלים לאינץ' (ppi).
במשך שנים רבות, צפיפות המסך של 96ppi הייתה נפוצה מאוד (לכן ב-CSS, פיקסל מוגדר כ-1/96 אינץ'). החל משנות ה-80, זו הייתה רזולוציית ברירת המחדל של Windows. בנוסף, זו הייתה הרזולוציה של מסכי CRT.
המצב התחיל להשתנות כשצגים מסוג LED הפכו לנפוצים בשנות ה-2000. במיוחד, Apple עוררה הדים רבים בשנת 2010 כשהשיקה את צגי Retina. הרזולוציה המינימלית של המסכים האלה הייתה 192ppi, פי שניים מהרזולוציה של מסכים 'רגילים' (192ppi/96ppi = 2).
window.devicePixelRatio
עם ההשקה של טכנולוגיית התצוגה החדשה, "פיקסלים של מכשירים" התחילו להשתנות בגודל הפיזי ובצורה שלהם, והגודל שלהם כבר לא היה זהה לגודל של "פיקסלים ב-CSS". הצורך להגדיר את היחס בין הגודל של 'פיקסלים במכשיר' לבין 'פיקסלים ב-CSS' הוביל להצגת הערך devicePixelRatio (שנקרא לפעמים 'יחס פיקסלים ב-CSS').
devicePixelRatio מגדיר את היחס בין פיקסלים במכשיר לבין פיקסלים ב-CSS במכשיר מסוים. במכשיר עם רזולוציה של 192ppi, הערך של devicePixelRatio הוא 2 (192 PPI / 96 PPI = 2) כי "2 פיקסלים במסך הם בגודל של פיקסל אחד ב-CSS".
כיום, רוב המכשירים כוללים יחס פיקסלים של המכשיר (DPR) בין 1.0 ל-4.0.
כדי לבדוק את צפיפות הפיקסלים של מכשיר, מקלידים
window.devicePixelRatioבמסוף.בטבלה הזו אפשר לראות את יחס הפיקסלים של מכשירים נפוצים. רוב הערכים הם בין 1.0 ל-4.0.
אז איך משתמשים בפועל במידע הזה?
שינוי הגודל של התמונות על סמך יחס הפיקסלים של המכשיר
כדי שהתמונות ייראו במיטבן במסכים ברזולוציה גבוהה, צריך לספק גרסאות שונות של התמונות לdevicePixelRatios שונים.
| יחס הפיקסלים של המכשיר | המשמעות של הסטטוס הזה היא: | במכשיר הזה, תג <img> עם רוחב CSS של 250 פיקסלים, יראה הכי טוב כשתמונה המקור היא... |
|---|---|---|
| 1 | פיקסל אחד של מכשיר = פיקסל CSS אחד | ברוחב 250 פיקסלים |
| 2 | 2 פיקסלים במכשיר = פיקסל אחד ב-CSS | ברוחב 500 פיקסלים |
| 3 | 3 פיקסלים במכשיר = פיקסל אחד ב-CSS | רוחב 750 פיקסלים |
כדאי לשים לב:
- מידות הפיקסלים שמופיעות בכלי לעריכת תמונות, בספריות קבצים ובמקומות אחרים הן מדידה של פיקסלים לוגיים.
- במסכים ברזולוציה גבוהה יותר ובמסכים גדולים יותר, צריך תמונות בגודל גדול יותר. הגדלת תמונות קטנות לא מביאה לתוצאות טובות כמו הצגת כמה גרסאות של תמונות. הדפדפן היה עושה זאת בכל מקרה אם לא הייתה מסופקת תמונה ברזולוציה גבוהה.
שימוש בתיאורי צפיפות כדי להציג כמה תמונות
אפשר להשתמש בתיאורי הצפיפות, בשילוב עם המאפיין srcset, כדי להציג תמונות שונות ל-devicePixelRatios שונים.
- בודקים את הקובץ
index.htmlומוצאים את הרכיב<img>.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
הדוגמה הזו מתורגמת למילים:
1x,2xו-3xהם תיאורי צפיפות שמספרים לדפדפן מהי דחיסות הפיקסלים לתמונה. כך הדפדפן לא צריך להוריד תמונה כדי לקבוע את המידע הזה.- הדפדפן יכול לבחור בין שלוש תמונות:
flower-1x.jpg(מיועדת לדפדפנים עם צפיפות פיקסלים של1.0),flower-2x.jpg(מיועדת לדפדפנים עם צפיפות פיקסלים של2.0) ו-flower-3x.jpg(מיועדת לדפדפנים עם צפיפות פיקסלים של3.0). flower.jpgהיא תמונת החלופי לדפדפנים שלא תומכים ב-srcset.
איך משתמשים באפשרות הזו:
- משתמשים ב-devicePixelRatio וביחידה
xכדי לכתוב תיאורים של צפיפות. לדוגמה, מתאר הצפיפות של מסכי Retina רבים (window.devicePixelRatio = 2) יהיה2x. - אם לא מציינים מאפיין צפיפות, ההנחה היא שהוא
1x. - מומלץ לכלול תיאורים של צפיפות בשמות הקבצים (כדי לעזור לכם לעקוב אחרי הקבצים), אבל זה לא חובה. לכל קובץ יכול להיות כל קובץ.
- אין צורך לכלול מאפיין
sizes. המאפייןsizesמשמש רק עם מתארי רוחב.