היכרות עם ההדגמה
- כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא)
. - טוענים מחדש את הדף במכשירים שונים כדי לראות שהדפדפן טוען תמונות שונות.
אתם יכולים להשתמש באמולטור המכשיר בשביל זה. אם אתם מחפשים צפיפות תצוגה ספציפית, הנה כמה מכשירים שכדאי לנסות:
| צפיפות 1x | Blackberry Playbook, הרבה מסכים חיצוניים |
| צפיפות כפולה | אייפד או אייפון 5/6 |
| צפיפות פי 3 | Galaxy S5 או iPhone X |
- כדי לראות את הקוד שמאפשר את זה, אפשר לעיין ב-
index.html.
איך זה עובד?
יכול להיות שרוב האנשים לא מכירים את המושג "תיאורי צפיפות". כדי להבין אותם טוב יותר, כדאי לקבל קצת רקע על האופן שבו הדפדפן עובד עם פיקסלים.
מהם פיקסלים
נתחיל מההתחלה ונגדיר מהו פיקסל. זה נשמע פשוט, אבל למילה "פיקסל" יכולות להיות הרבה משמעויות:
- פיקסל במכשיר (נקרא גם "פיקסל פיזי")
- נקודת הצבע הקטנה ביותר שאפשר להציג במכשיר.
- פיקסל לוגי
- מידע שמציין את הצבע במיקום מסוים ברשת. לסוג הפיקסל הזה אין גודל פיזי מובנה.
- פיקסל CSS
- מפרט ה-CSS מגדיר פיקסל כיחידת מידה פיזית. 1 פיקסל = 1/96 אינץ'.
צפיפות הפיקסלים
דחיסות הפיקסלים (נקראת גם "צפיפות המסך" או "צפיפות התצוגה") מודדת את צפיפות הפיקסלים של המכשיר באזור פיזי נתון. בדרך כלל, הרזולוציה נמדדת בפיקסלים לאינץ' (ppi).
במשך שנים רבות, צפיפות תצוגה של 96ppi הייתה נפוצה מאוד (ולכן CSS מגדיר פיקסל כ-1/96 של אינץ'). החל משנות ה-80, זו הייתה הרזולוציה שמוגדרת כברירת מחדל ב-Windows. בנוסף, זו הייתה הרזולוציה של מסכי CRT.
המצב הזה התחיל להשתנות כשמסכי LED הפכו לנפוצים בשנות ה-2000. במיוחד, אפל עשתה רעש גדול ב-2010 כשהציגה את מסכי הרטינה. למסכים האלה הייתה רזולוציה מינימלית של 192 ppi, שהייתה כפולה מהרזולוציה של מסכים "רגילים" (192 ppi/96 ppi = 2).
window.devicePixelRatio
עם כניסתה של טכנולוגיית תצוגה חדשה יותר, "פיקסלים של המכשיר" החלו להשתנות בגודל הפיזי ובצורה, והם כבר לא היו באותו גודל כמו "פיקסלים של CSS". הצורך להגדיר את הקשר בין הגודל של "פיקסלים של המכשיר" לבין "פיקסלים של CSS" הוא מה שהוביל להוספת devicePixelRatio (לפעמים נקרא "יחס הפיקסלים של CSS").
devicePixelRatio מגדיר את הקשר בין הפיקסלים של המכשיר לבין הפיקסלים של ה-CSS במכשיר מסוים. במכשיר עם 192ppi, ה-devicePixelRatio הוא 2 (192ppi/96ppi = 2) כי "2 מהפיקסלים בתצוגה שלו הם בגודל של פיקסל CSS אחד".
כיום, ברוב המכשירים יחס הפיקסלים הוא בין 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, כדי להציג תמונות שונות לערכים שונים של devicePixelRatio.
- מעיינים בקובץ
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משמש רק עם מתארי רוחב.