استكشاف هذا العرض التوضيحي
- لمعاينة الموقع الإلكتروني، انقر على عرض التطبيق، ثم انقر على
ملء الشاشة
. - أعِد تحميل الصفحة باستخدام أجهزة مختلفة لمشاهدة المتصفح وهو يحمّل صورًا مختلفة.
يمكنك استخدام محاكي الجهاز لإجراء ذلك. إذا كنت تبحث عن كثافات عرض محددة، فإليك بعض الأجهزة التي يمكنك تجربتها:
| كثافة واحدة | Blackberry Playbook، والعديد من الشاشات الخارجية |
| كثافة مضاعفة | iPad أو iPhone 5/6 |
| كثافة 3x | Galaxy S5 أو iPhone X |
- يمكنك الاطّلاع على
index.htmlللحصول على الرمز الذي يتيح تنفيذ هذا الإجراء.
كيف تعمل هذه الميزة؟
قد يكون مفهوم واصفات الكثافة غير مألوف لمعظم الأشخاص. لفهمها بشكل أفضل، من المفيد أن يكون لديك القليل من المعلومات الأساسية حول كيفية عمل المتصفح مع وحدات البكسل.
ما هي وحدات البكسل؟
لنبدأ من الأساسيات بتعريف البكسل. قد يبدو ذلك بسيطًا، ولكن يمكن أن يكون لكلمة "بكسل" معانٍ كثيرة:
- وحدة بكسل الجهاز (المعروفة أيضًا باسم "وحدة البكسل المادية")
- أصغر نقطة لون يمكن عرضها على الجهاز.
- وحدة بكسل منطقية
- معلومات تحدّد اللون في موقع جغرافي معيّن على شبكة لا يتضمّن هذا النوع من وحدات البكسل حجمًا ماديًا متأصلاً.
- بكسل CSS
- تحدّد مواصفات CSS البكسل كوحدة قياس مادية. بكسل واحد = 1/96 من البوصة.
كثافة البكسل
تقيس كثافة وحدات البكسل (المعروفة أيضًا باسم "كثافة الشاشة" أو "كثافة العرض") كثافة وحدات البكسل في الجهاز في مساحة معيّنة. ويتم قياس ذلك عادةً باستخدام وحدة بكسل في البوصة (ppi).
لسنوات عديدة، كانت كثافة العرض 96 بكسل في البوصة شائعة جدًا (وبالتالي تحدد CSS البكسل على أنه 1/96 من البوصة). بدءًا من الثمانينيات، كانت الدقة الافتراضية لنظام التشغيل Windows. بالإضافة إلى ذلك، كانت دقة شاشات CRT.
بدأ هذا يتغير مع انتشار شاشات LED في العقد الأول من القرن الحادي والعشرين. على وجه الخصوص، أحدثت Apple ضجة كبيرة في عام 2010 عندما قدمت شاشات Retina. كان الحد الأدنى لدقة هذه الشاشات هو 192 بكسل في البوصة، أي ضعف دقة الشاشات "العادية" (192 بكسل في البوصة/96 بكسل في البوصة = 2).
window.devicePixelRatio
ومع ظهور تكنولوجيا العرض الأحدث، بدأت "وحدات بكسل الجهاز" تختلف في الحجم المادي والشكل ولم تعُد بالحجم نفسه الذي تتسم به "وحدات بكسل CSS". إنّ الحاجة إلى تحديد العلاقة بين حجم "وحدات البكسل على الجهاز" و "وحدات البكسل في CSS" هي ما أدى إلى تقديم devicePixelRatio (يُطلق عليها أحيانًا "نسبة وحدات البكسل في CSS").
يحدّد devicePixelRatio العلاقة بين وحدات بكسل الجهاز ووحدات بكسل CSS
لجهاز معيّن. يحتوي الجهاز الذي تبلغ دقته 192 بكسل في البوصة على devicePixelRatio بقيمة 2 (192 بكسل في البوصة/96 بكسل في البوصة = 2) لأنّ "2 من وحدات بكسل العرض بحجم 1 بكسل CSS".
في الوقت الحالي، تتراوح نسبة وحدات البكسل على الجهاز في معظم الأجهزة بين 1.0 و4.0.
يمكنك تحديد كثافة وحدات البكسل في الجهاز من خلال كتابة
window.devicePixelRatioفي وحدة التحكّم.اطّلِع على هذا الجدول لمعرفة نِسب وحدات البكسل للأجهزة الشائعة. وتتراوح معظم القيم بين 1.0 و4.0.
كيف يمكنك تطبيق هذه المعلومات؟
تحديد حجم الصور استنادًا إلى نِسب وحدات البكسل على الجهاز
لكي تظهر الصور بأفضل شكل ممكن على الشاشات العالية الدقة، من الضروري توفير نُسخ مختلفة من الصور لمختلف devicePixelRatios.
| نسبة وحدات البكسل على الجهاز | يشير إلى أنّ: | على هذا الجهاز، ستظهر علامة <img> بعرض CSS يبلغ 250 بكسل بشكل أفضل عندما تكون الصورة المصدر... |
|---|---|---|
| 1 | بكسل واحد للجهاز = بكسل واحد في CSS | بعرض 250 بكسل |
| 2 | 2 بكسل على الجهاز = 1 بكسل في CSS | بعرض 500 بكسل |
| 3 | 3 بكسل على الجهاز = 1 بكسل في CSS | بعرض 750 بكسل |
ملاحظات:
- أبعاد البكسل المدرجة في برامج تحرير الصور وأدلة الملفات وأماكن أخرى هي قياس لوحدات البكسل المنطقية.
- بالنسبة إلى الشاشات ذات الدقة العالية والشاشات الأكبر حجمًا، ستحتاج إلى صور ذات أبعاد أكبر. إنّ مجرد تكبير الصور الأصغر حجمًا يتعارض مع الغرض من عرض نُسخ متعددة من الصور. كان المتصفح سيفعل ذلك على أي حال إذا لم يتم توفير صورة عالية الدقة.
استخدِم واصفات الكثافة لعرض صور
متعددة
يمكن استخدام واصفات الكثافة مع السمة "srcset " لعرض صور مختلفة لنسب بكسل مختلفة في الأجهزة.
- اطّلِع على ملف
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إلا مع واصفات العرض.