צפייה בהדגמה הזו
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על
מסך מלא
. - כדי לראות טעינה שונה של הדפדפן, צריך לטעון מחדש את הדף במכשירים שונים תמונות.
אפשר להשתמש באמולטור המכשיר בשביל זה. אם אתם רוצים למצוא תצוגה ספציפית צפיפות, הנה כמה מכשירים שכדאי לנסות:
| צפיפות של 1x | BlackBerry book, צגים חיצוניים רבים |
| צפיפות פי 2 | iPad או IPhone 5/6 |
| צפיפות פי 3 | Galaxy S5 או iPhone X |
- כדאי לחפש ב-
index.htmlאת הקוד שמבצע את הפעולה הזו.
איך זה עובד?
ייתכן שהמושג של תיאורי צפיפות לא מוכר לרוב האנשים. לשיפור להבין אותם, כדאי לקבל קצת רקע לגבי אופן הפעולה של הדפדפן עם פיקסלים.
מהם פיקסלים
נתחיל בהתחלה בהגדרה של פיקסל. הצליל הזה פשוט, אבל "פיקסל" יכולות להיות הרבה משמעויות:
- פיקסל של המכשיר (שנקרא גם 'פיקסל פיזי')
- נקודת הצבע הקטנה ביותר שאפשר להציג במכשיר.
- פיקסל לוגי
- מידע שמציין את הצבע במיקום מסוים ברשת. לפיקסלים מהסוג הזה אין גודל פיזי מובנה.
- פיקסל של CSS
- במפרט ה-CSS מוגדר פיקסל כיחידת מידה פיזית. פיקסל אחד = 1/96 אינץ'.
צפיפות הפיקסלים
צפיפות פיקסלים (נקראת גם 'דחיסות מסך' או 'צפיפות תצוגה') מודד את הצפיפות של הפיקסלים במכשיר באזור פיזי נתון. הדבר בדרך כלל נמדדת באמצעות פיקסלים לאינץ' (PP).
במשך שנים רבות, 96 PPI היה צפיפות תצוגה נפוצה מאוד (ומכאן שירות CSS הגדיר פיקסלים בגודל 1/96 אינץ'). משנות ה-80 של המאה ה-20 הייתה רזולוציית ברירת המחדל של Windows. בנוסף, זו הייתה הרזולוציה של CRT מעקבים.
המצב הזה החל להשתנות ככל שצגי LED נעשו נפוצים בשנות ה-2000. באופן ספציפי, Apple עורכת רעשי רקע ב-2010 כשהשיקה את צגי Retina שלה. האלה במסכים היו ברזולוציה של 192 PPI, שהייתה רזולוציה כפולה של "רגיל" (192 PPI/96 PPI = 2).
window.devicePixelRatio
עם השקת טכנולוגיית התצוגה החדשה, התכונה 'פיקסלים של מכשירים' התחיל להשתנות
בגודל הפיזי ובצורה
והן כבר לא היו באותו גודל כמו 'פיקסלים ב-CSS'. הצורך להגדיר
הקשר בין הגודל של 'פיקסלים של מכשירים' וגם 'פיקסלים ב-CSS' היא מה שהובילה
הצגת devicePixelRatio (שלפעמים נקרא 'CSS Pixel'
יחס גובה-רוחב").
devicePixelRatio מגדיר את הקשר בין פיקסלים במכשיר לפיקסלים ב-CSS
למכשיר מסוים. במכשיר עם איכות 192 PPI יש devicePixelRatio של 2 (192)
PPI/96 PPI = 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 " יכול לשמש להציג תמונות שונות למכשיריPixelRatios שונים.
- כדאי לבדוק את הקובץ
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.
איך משתמשים בזה:
- כתיבת תיאורי צפיפות צריך להשתמש במכשירPixelRatio וביחידה
x. עבור לדוגמה, מתאר הצפיפות של מסכי רטינה רבים (window.devicePixelRatio = 2) ייכתב כך.2x. - אם לא מזינים מתאר צפיפות, ההנחה היא שהוא
1x. - הכללת תיאוריי צפיפות בשמות קבצים היא מוסכמה מקובלת (ו עוזרות לעקוב אחר הקבצים), אבל אין בכך צורך. התמונות יכולות לכלול כל אחד [שם הקובץ].
- אין צורך לכלול מאפיין
sizes. המאפייןsizesהוא רק בשימוש עם תיאורי רוחב.