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