ربما أكون مخطئًا، لكن أعتقد أن هذا منطقي.
إذا نظرت إلى srcset في HTML، فسيتم تقديم الصور التالية بناءًم على نسبة بكسل الجهاز (x1، x1.5، x2).
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x
عادةً، يكون للهواتف المحمولة نسبة x2 (أو أكثر) لأن لديها كثافة بكسل أعلى.
لذلك سترغب في تقديم صور بدقة أعلى.
نسبة بكسل الجهاز
نسبة بكسل الجهاز (DPR) هي رقم مقدم من مصنعي الأجهزة ويستخدم للشاشات عالية الدقة (HiDPI) أو شاشات Retina (علامة تجارية لشركة Apple)، وهي جزء من الهواتف الذكية والأجهزة اللوحية الحديثة وحتى بعض أجهزة الكمبيوتر المحمولة والشاشات.
نسبة بكسل الجهاز (DPR) ترتبط ارتباطًا مباشرًا بكثافة بكسل الشاشة، وكلما زادت الكثافة زادت قيمة DPR.نسبة بكسل الجهاز (DPR) هي النسبة بين البكسلات الفعلية (للجهاز) والبكسلات المنطقية (CSS) في الاتجاه الأفقي (العرض) أو الرأسي (الارتفاع) للشاشة.
بمعنى آخر، نسبة بكسل الجهاز (DPR) هي رقم يستخدم لحساب دقة CSS للشاشة. من نسبة بكسل الجهاز (DPR) يمكننا أن نرى مباشرة عدد البكسلات الفعلية للجهاز التي تشكل بكسل CSS واحد.مثال:
Apple iPhone 12
الدقة بالبكسلات (للجهاز): 1170 × 2532
نسبة بكسل الجهاز (DPR): 3
العرض: 1170/3 = 390، الارتفاع: 2532/3 = 844
لذلك، الدقة بالبكسلات (CSS): 390 × 844نظرًا لأن نسبة بكسل الجهاز (DPR) هي 3، في شبكة البكسل: 3 (عرض) × 3 (ارتفاع) = 9؛ يتم استخدام 9 بكسلات فعلية لتشكيل بكسل CSS واحد.