הדגמה
- כדי לראות תצוגה מקדימה של האתר, מקישים על הצגת האפליקציה. לאחר מכן מקישים על מסך מלא
. - אפשר לטעון מחדש את הדף במכשירים שונים כדי לראות שהדפדפן טוען תמונות שונות.
אפשר להשתמש למטרה הזו במהנת המכשיר. אם אתם מחפשים צפיפות תצוגה ספציפית, הנה כמה מכשירים שאפשר לנסות:
| צפיפות 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משמש רק עם מתארי רוחב.