استخدام أدوات وصف الكثافة

Katie Hempenius

استكشاف هذا العرض التوضيحي

• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة
• أعِد تحميل الصفحة باستخدام أجهزة مختلفة لملاحظة اختلاف في تحميل المتصفّح. الصور.

يمكنك استخدام مُحاكي الجهاز لتنفيذ هذا الإجراء. إذا كنت تبحث عن شاشة عرض محددة للغاية، فإليك بعض الأجهزة التي يمكنك تجربتها:

• يُرجى مراجعة "index.html" للحصول على الرمز المسؤول عن هذا الإجراء.

كيف تعمل هذه الميزة؟

قد لا يكون مفهوم واصفات الكثافة غير مألوف لمعظم الأشخاص. للأفضل وفهمها، فمن المفيد أن يكون لديك بعض المعلومات الأساسية عن كيفية عمل المتصفح باستخدام البكسل.

ما هي وحدات البكسل؟

لنبدأ في البداية بتعريف البكسل. هذا الصوت بسيطًا، ولكن "pixel" في الواقع معانٍ عديدة:

بكسل الجهاز (يُعرف أيضًا باسم "بكسل مادي")

أصغر نقطة من اللون يمكن عرضها على الجهاز.

البكسل المنطقي

يشير ذلك المصطلح إلى معلومات تحدّد اللون في موقع جغرافي معيّن على الشبكة. هذا النوع من وحدات البكسل ليس له حجم مادي متأصل.

بكسل CSS

تعرّف مواصفات CSS وحدة البكسل على أنها وحدة قياس مادي. 1 بكسل = 1/96 من البوصة.

كثافة البكسل

كثافة وحدات البكسل (يُشار إليها أيضًا باسم "كثافة الشاشة" أو "كثافة العرض") تقيس كثافة وحدات البكسل في الجهاز في منطقة مادية معيّنة. هذا هو ويتم قياسه عادةً باستخدام وحدات البكسل لكل بوصة (ppi).

لسنوات عديدة، كانت 96 نقطة في البوصة من كثافة العرض الشائعة جدًا (لذا حددت CSS 1/96 من البوصة). بدايةً من الثمانينيات، كان هذا الحل هو الخيار التلقائي من Windows. بالإضافة إلى ذلك، كانت درجة دقة CRT المراقبة.

وبدأ هذا يتغير حيث أصبحت شاشات LED شائعة في العقد الأول من القرن الحادي والعشرين. وعلى وجه الخصوص، حققت شركة Apple فارقًا كبيرًا في عام 2010 عندما طرحت شاشات ريتينا. هذه كان للشاشات الحد الأدنى من الدقة 192 بكسل في البوصة، وهو ما كان ضعف دقة "عادي" الشاشة (192 بكسل في البوصة/96 بكسل في البوصة = 2).

window.devicePixelRatio

ومع ظهور تكنولوجيا العرض الأحدث، "وحدات بكسل الجهاز" بدأ يتغير في الحجم والشكل ولم تعد بنفس حجم "بكسل CSS". تعتبر الحاجة إلى تحديد العلاقة بين حجم "وحدات بكسل الجهاز" و"بكسل CSS" هو ما أدى إلى طرح devicePixelRatio (يُسمى أحيانًا "CSS Pixel النسبة").

تحدد السمة devicePixelRatio العلاقة بين وحدات البكسل في الجهاز ووحدات بكسل CSS. لجهاز معين. يحتوي جهاز بدقة 192 بكسل في البوصة على devicePixelRatio من 2 (192) ppi/96 ppi = 2) لأن "2 من وحدات بكسل العرض بحجم 1 CSS بكسل".

في هذه الأيام، تتراوح نسبة وحدات البكسل في معظم الأجهزة بين 1.0 و4.0.

• يمكنك تحديد كثافة وحدات البكسل لأحد الأجهزة من خلال كتابة window.devicePixelRatio. في وحدة التحكم.

• عرض هذا الجدول للاطلاع على نسب البكسل الأجهزة الشائعة. تتراوح معظم القيم بين 1.0 و4.0.

إذًا، كيف تطبق هذه المعلومات في الواقع؟

تحديد حجم الصور على أساس نسبة وحدات البكسل على الجهاز

لكي تظهر الصور في أفضل حالاتها على الشاشات عالية الدقة، يجب اللازمة لتوفير نُسخ صور مختلفة لمختلف devicePixelRatios.

ملاحظات:

• تتضمن أبعاد البكسل المدرجة في محررات الصور وأدلة الملفات والأماكن الأخرى هي قياس وحدات البكسل المنطقية.
• وللشاشات ذات الدقة الأعلى والشاشات الأكبر حجمًا، ستحتاج إلى صور وأبعاد أكبر. مجرد تكبير الصور الأصغر يلغي الغرض من تعرض نُسخ صور متعددة. كان المتصفح سيفعل ذلك على أي حال إذا عدم تقديم صورة عالية الدقة.

استخدام أدوات وصف الكثافة لعرض عدة صور باللغة

أدوات وصف الكثافة، بالاقتران مع "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 لكتابة أوصاف الكثافة. بالنسبة مثال، واصف الكثافة للعديد من شاشات Retina (window.devicePixelRatio = 2) ستتم كتابته كـ 2x.
• إذا لم يتم توفير واصف للكثافة، يُفترض أن يكون 1x.
• يُعد تضمين واصفات الكثافة في أسماء الملفات اصطلاحًا شائعًا (وسيتم تساعدك في تتبع الملفات) ولكنها ليست ضرورية. يمكن أن تحتوي الصور على أي .
• ما مِن حاجة إلى تضمين سمة sizes. السمة sizes هي فقط يُستخدم مع واصفات العرض.