ما هي نسبة بكسل الجهاز (DPR)؟ ولماذا تبدو الصور ضبابية على شاشات Retina

تقضي أياماً في تصميم موقع إلكتروني متقن. ترفع شعاراً بصيغة PNG وبدقة فائقة، وتستعرضه على شاشة حاسوبك المكتبي فيبدو في غاية النقاء والوضوح. ولكن بمجرد فتح الصفحة ذاتها على هاتف iPhone أو جهاز MacBook أو شاشة بدقة 4K، تجد الشعار يبدو باهتاً ومشوشاً وبحواف غير حادة ومبهمة التفاصيل.

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

لماذا تجعل الشاشات الحديثة ذات الدقة العالية العناصر الرسومية تبدو أسوأ بدلاً من أن تظهرها بشكل أفضل؟

تكمن الإجابة في رقم رياضي واحد: نسبة بكسل الجهاز (Device Pixel Ratio وتُعرف اختصاراً بـ DPR).

إن فهم نسبة بكسل الجهاز (DPR) هو أحد أهم المهارات العملية التي يحتاجها مصممو الويب ومطورو الواجهات الأمامية وأصحاب المواقع. فبمجرد إدراكك لكيفية تعامل متصفحات الويب مع الشاشات عالية الكثافة، لن ترفع صورة ضبابية مجدداً، ولن تواجه صعوبة في تقديم أصول رسومية متجاوبة وعالية الدقة.

---

أصل المشكلة: بكسلات العتاد المادية مقابل بكسلات التنسيق

لفهم مفهوم DPR، نحتاج إلى استرجاع الكيفية التي كانت تعمل بها شاشات الحواسيب في السابق.

لعقود طويلة، كانت الشاشات الرقمية تتبع قاعدة بسيطة ومباشرة: كل بكسل في الكود البرمجي يقابله صمام ثنائي ضوئي مادي واحد على الشاشة.

إذا كانت دقة شاشتك الأصلية 1024 × 768، فهذا يعني أنها تحتوي فعلياً على 1024 باعث ضوء RGB متناهي الصغر أفقياً و768 عمودياً. وعندما كنت تكتب سطراً في كود CSS مثل width: 200px;، كان المتصفح يوجه الشاشة لإضاءة 200 نقطة عتادية بدقة عبر السطح الزجاجي.

في تلك الحقبة، كانت الشاشات تتمتع بكثافة نقطية تقارب 72 إلى 96 بكسل لكل بوصة (PPI). وكان الزر الذي يبلغ عرضه 100 بكسل يظهر بنفس الحجم الفيزيائي تقريباً على جميع الشاشات المكتبية في العالم.

ثورة الهواتف الذكية وتغيير القواعد

تغير كل شيء جذرياً في عام 2010 عندما وصلت الشاشات عالية الكثافة إلى الأسواق الاستهلاكية (بدءاً من شاشة “Retina Display” التي أطلقتها شركة Apple في هاتف iPhone 4).

قام صانعو العتاد بضغط أربعة أضعاف عدد البكسلات في نفس المساحة الفيزيائية للزجاج. فالشاشة التي كانت تتسع سابقاً لـ 320 × 480 بكسل، أصبحت فجأة تضم 640 × 960 بكسل مادي في شاشة جيب صغيرة بقياس 3.5 بوصة فقط.

تسببت هذه القفزة في أزمة تقنية حقيقية لشبكة الويب.

فلو استمرت متصفحات الإنترنت في التعامل مع كل بكسل CSS على أنه بكسل مادي:

• لتقلصت المواقع المصممة للشاشات المكتبية (بعرض 960px) لتصبح بحجم طابع البريد.
• لأصبحت روابط التنقل والأزرار بعرض 2 أو 3 مليمترات فقط—مما يجعل النقر عليها بالإصبع مستحيلاً.
• لأصبح قراءة النص العادي تتطلب عدسة مكبرة.

لم يكن بإمكان المتصفحات تدمير تجربة تصفح مليارات المواقع الإلكترونية. ولحل هذه المعضلة، قامت فرق هندسة المتصفحات ومجموعات معايير الويب بفصل مفهوم “البكسل” إلى مفهومين مستقلين تماماً:

1. البكسلات المادية (Physical Pixels / عتاد الشاشة): النقاط الضوئية المجهرية الحقيقية المدمجة في لوحة الشاشة.
2. بكسلات CSS (Logical Pixels / البكسلات المنطقية / المرجعية): وحدة مجردة تستخدمها المتصفحات لتحديد التخطيط الهيكلي وأحجام الخطوط والمسافات واستعلامات الوسائط (Media Queries).

نسبة بكسل الجهاز (DPR) هي ببساطة معامل التحويل بين هذين العالمين.

---

ما هي نسبة بكسل الجهاز (DPR) تحديداً؟

نسبة بكسل الجهاز (Device Pixel Ratio) هي النسبة بين بكسلات العتاد المادية والبكسلات المنطقية لكود CSS على شاشة معينة.

$$\text{DPR} = \frac{\text{البكسلات المادية للشاشة}}{\text{بكسلات CSS المنطقية}}$$

يمكنك التفكير في DPR على أنه إجابة على هذا التساؤل المباشر:

“كم عدد النقاط المادية الحقيقية التي تستخدمها هذه الشاشة لرسم مربع واحد بمقاس 1px محدد في ملف CSS؟”

إليك كيف تُترجم أنواع الشاشات المختلفة هذه المعادلة:

1. الشاشات القياسية (DPR = 1.0)

• المعنى: 1 بكسل CSS = 1 بكسل مادي في العتاد.
• أماكن تواجدها: الشاشات المكتبية التقليدية بدقة 1080p (مقاس 24 أو 27 بوصة)، الحواسيب المحمولة الاقتصادية، أجهزة التلفاز القديمة.
• طريقة العرض: تشغل الصورة بمقاس 100 × 100 بكسل بالضبط 100 × 100 صمام ضوئي على الشاشة. لا يوجد تكبير، ولا استيفاء، ولا تمديد.

2. الشاشات عالية الكثافة / شاشات Retina (DPR = 2.0)

• المعنى: 1 بكسل CSS = 2 بكسل مادي على كل محور (أفقياً وعمودياً).
• أماكن تواجدها: أجهزة MacBook Air وMacBook Pro وiPad والشاشات بدقة 4K المضبوطة على مقياس تكبير 200%، والعديد من أجهزة الأندرويد اللوحية.
• طريقة العرض: نظراً لأن البكسلات تُحسب في بعدين (العرض والارتفاع)، فإن مساحة $1 \times 1$ بكسل CSS تدعمها شبكة من $2 \times 2$ — أي أن 4 بكسلات مادية تُستخدم لرسم وحدة تخطيط منطقية واحدة!

3. شاشات الهواتف فائقة الكثافة (DPR = 3.0)

• المعنى: 1 بكسل CSS = 3 بكسلات مادية على كل محور.
• أماكن تواجدها: هواتف iPhone 13 Pro وحتى iPhone 16 Pro، وسلسلة Samsung Galaxy S، وهواتف Google Pixel الرائدة.
• طريقة العرض: مساحة $1 \times 1$ بكسل CSS تدعمها شبكة عتادية من $3 \times 3$. هذا يعني أن 9 نقاط مادية حقيقية تضيء لرسم كل بكسل CSS مفرد!

---

جدول مقارنة DPR: أشهر الأجهزة الشائعة

الجهاز	دقة الشاشة المادية (Physical)	أبعاد إطار العرض في CSS (Viewport)	نسبة بكسل الجهاز (DPR)	النقاط المادية لكل بكسل CSS
شاشة مكتبية قياسية 24 بوصة	1920 × 1080	1920 × 1080	1.0x	نقطة واحدة ($1 \times 1$)
MacBook Air 13” (M2/M3)	2560 × 1664	1280 × 832	2.0x	4 نقاط ($2 \times 2$)
MacBook Pro 16” (M3 Max)	3456 × 2234	1728 × 1117	2.0x	4 نقاط ($2 \times 2$)
شاشة 4K مقاس 27 بوصة (تكبير 200%)	3840 × 2160	1920 × 1080	2.0x	4 نقاط ($2 \times 2$)
لابتوب ويندوز 14 بوصة (تكبير 150%)	1920 × 1080	1280 × 720	1.5x	2.25 نقطة
iPhone 15 / 16 (النسخة القياسية)	2556 × 1179	393 × 852	3.0x	9 نقاط ($3 \times 3$)
Samsung Galaxy S24 Ultra	3120 × 1440	384 × 832	3.0x	9 نقاط ($3 \times 3$)
iPad Air 11”	2360 × 1640	1180 × 820	2.0x	4 نقاط ($2 \times 2$)

هل لاحظت شيئاً لافتاً في حواسيب ويندوز المحمولة؟
لاحظ قيمة DPR البالغة 1.5x في حاسوب ويندوز المحمول. فبينما تلتزم أبل بمضاعفات صحيحة ودقيقة (مثل 2.0x و3.0x)، تتيح إعدادات العرض في ويندوز مقاييس كسرية (125%، 150%، 175%). هذا يعني أن قيمة DPR يمكن أن تكون رقماً عشرياً مثل 1.25 أو 1.5!

---

لماذا تبدو الصور ضبابية على الشاشات ذات معدل DPR المرتفع؟

الآن وقد عرفت أن شاشة iPhone أو MacBook تستخدم من 4 إلى 9 نقاط عتادية لكل بكسل تنسيق CSS، أصبح سبب ضبابية الصور بديهياً وواضحاً.

لنأخذ مثالاً عملياً توضيحياً خطوة بخطوة:

تخيل أن لديك شعاراً لشركة. حددت له في ملف CSS أبعاداً قياسية:

.site-logo {
  width: 200px;
  height: 60px;
}

ولشغل هذه المساحة، قمت بتصدير صورة PNG باسم logo.png بقياس 200 × 60 بكسل تماماً، وأضفتها في صفحتك:

<img src="logo.png" class="site-logo" alt="Acme Corp">

إليك ما يحدث خلف الكواليس اعتماداً على الشاشة التي يستخدمها زائرك:

السيناريو أ: الزائر يستخدم شاشة مكتبية 1080p عادية (DPR = 1)

• يحجز المتصفح مساحة قدرها 200 × 60 بكسل CSS على الشاشة.
• تحتوي الشاشة على نقطة عتادية واحدة لكل بكسل CSS.
• المساحة العتادية الإجمالية: $200 \times 60 = 12,000$ صمام ضوئي.
• ملف الصورة يوفر: $200 \times 60 = 12,000$ بكسل صورة.
• النتيجة: تطابق مثالي بنسبة 1 إلى 1. كل بكسل في الصورة يسقط مباشرة على بكسل عتادي واحد. يبدو الشعار حاداً ونقياً بالكامل.

السيناريو ب: الزائر يستخدم MacBook Pro أو شاشة 4K (DPR = 2)

• لا يزال المتصفح يحجز إطاراً بمقاس 200 × 60 بكسل CSS حتى لا يختل تخطيط الموقع.
• لكن الشاشة تعمل بمعدل DPR يبلغ 2.0. ويمتد هذا الإطار الآن على مساحة 400 × 120 بكسل مادي!
• المساحة العتادية الإجمالية: $400 \times 120 = 48,000$ صمام ضوئي.
• ملف الصورة ما زال يحتوي فقط على: $200 \times 60 = 12,000$ بكسل.
• يجد المتصفح نفسه فجأة مفتقراً إلى 36,000 بكسل من البيانات البصرية!
• النتيجة: لا يملك المتصفح خياراً سوى تمديد الصورة إلى ضعف حجمها الأصلي. ويستخدم خوارزميات الاستيفاء الثنائي أو التكعيبي (Interpolation) لتخمين ألوان البكسلات المفقودة. فتتلاشى حدة الحواف وتصبح الخطوط باهتة ويبدو الشعار غير واضح المعالم وضبابياً.

السيناريو ج: الزائر يستخدم هاتف iPhone 16 Pro (DPR = 3)

• صندوق 200 × 60 في CSS يغطي الآن 600 × 180 بكسل مادي ($108,000$ باعث ضوء).
• يتم تمديد صورتك ذات الـ 12,000 بكسل لتغطي مساحة تعادل 9 أضعاف مساحتها الأصلية!
• النتيجة: ضبابية شديدة، وتكسر في الصورة، وتشوه ملحوظ في التفاصيل والنصوص المضمنة.

لماذا لا تعاني النصوص العادية من هذه المشكلة؟

قد تتساءل: إذا كانت الصور تتمدد وتفقد وضوحها، فلماذا تظل نصوص HTML فائقة الحدة؟

لا تعتمد الخطوط على بكسلات الصور النقطية (Bitmap). فالخطوط هي أشكال متجهة (Vector outlines) موصوفة رياضياً بواسطة منحنيات وإحداثيات (منحنيات بيزييه).

عندما يقوم المتصفح بعرض فقرة نصية على شاشة 2x أو 3x، يعيد نظام التشغيل رسم هندسة الخط مباشرة بالدقة الفيزيائية الكاملة للشاشة. حيث يحسب المنحنيات الحادة مستخدماً كافة البكسلات المادية المتاحة والبالغ عددها 48,000 أو 108,000 نقطة.

لهذا السبب تحديداً تظهر الصور النقطية المشوشة مزعجة للغاية على الشاشات الحديثة—لأنها تقف جنباً إلى جنب مع نصوص متجهة فائقة النقاء والدقة!

---

كيفية التحقق من قيمة DPR لشاشتك في أي متصفح

لست بحاجة إلى أدوات معقدة أو إضافات للمتصفح لمعرفة نسبة بكسل الجهاز للشاشة التي تقرأ منها الآن.

الطريقة الأولى: عبر لوحة تحكم المتصفح (Console)

1. افتح أدوات المطور (Developer Tools) بالضغط على F12 في ويندوز/لينكس، أو Cmd + Option + I على ماك.
2. انقر على علامة تبويب Console.
3. اكتب:

   window.devicePixelRatio

4. اضغط Enter.

الرقم الناتج يمثل معدل DPR النشط لشاشتك بدقة. على الشاشات العادية سيعطيك 1، وعلى أجهزة MacBook بشاشة Retina سيعطيك 2، وعلى هواتف iPhone سيعطيك 3.

الطريقة الثانية: مراقبة تغيرات DPR في جافا سكريبت

هل تعلم أن قيمة DPR يمكن أن تتغير ديناميكياً أثناء تصفح المستخدم؟

إذا قام المستخدم بتكبير الصفحة (Cmd + أو Ctrl +)، أو سحب نافذة المتصفح من شاشة اللابتوب إلى شاشة خارجية بدقة 1080p، أو غيّر مقياس التكبير في إعدادات ويندوز، فإن قيمة DPR في المتصفح تتغير على الفور.

يمكنك مراقبة هذه التغييرات في JavaScript الحديثة باستخدام matchMedia:

const updateDprNotice = () => {
  console.log(`قيمة DPR الحالية أصبحت الآن: ${window.devicePixelRatio}`);
};

// إنشاء استعلام وسائط يطابق الدقة الحالية
const dprQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);

// الاستماع لتغيرات الدقة (مثل التكبير أو نقل النافذة بين الشاشات)
dprQuery.addEventListener("change", updateDprNotice);

---

كيفية حل مشكلة الصور الضبابية: 5 استراتيجيات مجربة

نصل الآن إلى الجانب التطبيقي. كيف نضمن ظهور رسوماتنا وصورنا بمنتهى الوضوح والنقاء على كل الشاشات دون تحميل ملفات ضخمة وبطيئة على الشاشات العادية؟

إليك الاستراتيجيات الخمس المعتمدة في تطوير الويب الحديث:

1. استخدام صيغة SVG للشعارات والأيقونات والرسومات البسيطة

كلما كانت الصورة عبارة عن أشكال هندسية أو ألوان مسطحة أو شعار، إياك وتصديرها بصيغة PNG أو JPEG. استخدم بدلاً منها SVG (رسومات المتجهات القابلة للتطوير).

مثل الخطوط تماماً، ملفات SVG هي متجهات مبنية على إحداثيات XML وليست شبكات نقطية. وسواء عُرضت على شاشة 1x أو هاتف iPhone بمعدل 3x أو حتى لوحة إعلانية عملاقة مطبوعة بدقة 16K، فإن ملف SVG يُعرض بدقة العتاد القصوى وبحدة رياضية لا تشوبها شائبة.

<!-- فائقة الحدة على كل شاشة موجودة، وحجم ملف متناهي الصغر -->
<img src="/logo.svg" width="200" height="60" alt="شعار الشركة">

قاعدة عامة:

• الشعارات والأيقونات والرموز التعبيرية والأسهم والرسوم التوضيحية $\rightarrow$ SVG.
• الصور الفوتوغرافية ولقطات الشاشة المعقدة والأعمال الفنية الواقعية $\rightarrow$ صور نقطية مع srcset المتجاوب (انظر أدناه).

---

2. قاعدة 2x للصور النقطية (حل سريع وفعال)

إذا كان لديك صورة نقطية (مثل صورة شخصية أو صورة كاتب) تُعرض دائماً بحجم CSS ثابت—وليكن 80px × 80px:

1. صدّر ملف الصورة بضعف الدقة المطلوبة: 160px × 160px.
2. احفظها بصيغة حديثة مثل WebP أو AVIF للحفاظ على حجم ملف خفيف جداً.
3. حدد أبعاد العرض بوضوح في كود HTML أو CSS بالحجم المطلوب:

<!-- حجم الملف الفعلي 160x160، ولكنه محدد بـ 80x80 بكسل في CSS -->
<img src="/avatar@2x.webp" width="80" height="80" alt="الصورة الشخصية">

على شاشات 1x، سيقوم المتصفح بتصغير الصورة بلطف مع الحفاظ على نقائها، بينما على شاشات Retina بمعدل 2x، ستتلقى كل نقطة ضوئية مادية تفاصيل حقيقية كاملة، لتبدو الصورة نقية وحادة تماماً.

---

3. استخدام srcset مع محددات كثافة البكسل (1x, 2x)

ماذا لو كنت لا ترغب في إجبار الزوار أصحاب الاتصالات البطيئة أو الشاشات القياسية 1x على تحميل صور ذات أحجام مضاعفة؟

توفر لغة HTML دعماً أصيلاً للتبديل بين الصور بناءً على قيمة DPR عبر خاصية srcset مع محددات الكثافة (1x, 2x, 3x):

<img 
  src="/hero-800.webp" 
  srcset="/hero-800.webp 1x, 
          /hero-1600.webp 2x, 
          /hero-2400.webp 3x"
  width="800" 
  height="450" 
  alt="مساحة عمل عصرية"
  loading="lazy">

كيف يقيّم المتصفح هذا الكود:

• مستخدم الحاسوب المكتبي العادي بدقة 1080p (DPR 1.0) يحمّل hero-800.webp (حوالي 45 كيلوبايت).
• مستخدم جهاز MacBook Pro (DPR 2.0) يحمّل hero-1600.webp (حوالي 120 كيلوبايت).
• مستخدم هاتف iPhone 16 Pro (DPR 3.0) يحمّل hero-2400.webp (حوالي 220 كيلوبايت).

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

---

4. الصور المرنة والمتجاوبة عبر srcset وsizes (للتنسيقات الديناميكية)

في المواقع المتجاوبة، نادراً ما تبقى الصورة بعرض ثابت. فقد تشغل صورة البطاقة 100% من عرض الشاشة على الهاتف المحمول، ولكنها تأخذ فقط 33% من العرض ضمن شبكة من 3 أعمدة على الحاسوب المكتبي.

عندما يتغير عرض الصورة بتغير مقاس الشاشة، لا تكفي محددات الكثافة (1x, 2x). بدلاً من ذلك، نستخدم محددات العرض (w) مقترنة بخاصية sizes:

<img 
  src="/article-cover-800.webp"
  srcset="/article-cover-400.webp 400w,
          /article-cover-800.webp 800w,
          /article-cover-1200.webp 1200w,
          /article-cover-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 
         (max-width: 1024px) 50vw, 
         33vw"
  width="800" 
  height="450" 
  alt="فهم دقة الشاشة"
  loading="lazy">

لماذا تعمل هذه الطريقة بكفاءة مذهلة:

يقوم المتصفح بضرب حجم المساحة المعروضة في CSS بنسبة بكسل الجهاز (DPR):

• في هاتف محمول بعرض إطار 390px (بمعدل DPR 3.0)، تشغل الصورة 100vw ($390\text{px}$). يحسب المتصفح: $$390\text{px} \times 3.0 = 1,170\text{ بكسل مادي مطلوب}$$ ويقوم تلقائياً باختيار ملف article-cover-1200.webp.
• بينما مستخدم الحاسوب المكتبي بدقة 1080p بنافذة عرض 1280px (بمعدل DPR 1.0)، تشغل الصورة لديه 33vw ($422\text{px}$). يحسب المتصفح: $$422\text{px} \times 1.0 = 422\text{ بكسل مادي مطلوب}$$ ويختار ملف article-cover-400.webp.

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

---

5. خلفيات CSS عالية الدقة عبر image-set() أو استعلامات الوسائط

إذا كنت تعتمد على صور الخلفية في ملفات CSS، فإن استعلامات الوسائط أو دالة image-set() الحديثة تتيح لك توفير صور عالية الكثافة بسهولة تامة.

الخيار أ: استخدام image-set() الحديثة (موصى بها)

مدعومة عبر جميع المتصفحات الحديثة (Chrome وSafari وFirefox وEdge):

.hero-banner {
  background-image: image-set(
    url("/hero-bg.webp") 1x,
    url("/hero-bg@2x.webp") 2x
  );
  background-size: cover;
  background-position: center;
}

الخيار ب: استعلامات الوسائط في CSS مع min-resolution

إذا كنت ترغب في تحكم دقيق بنقاط التوقف وكثافة البكسل معاً:

/* خلفية عادية 1x */
.card-header {
  background-image: url("/card-bg.webp");
  background-size: 300px 180px;
}

/* خلفية 2x لشاشات ريتينا */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card-header {
    background-image: url("/card-bg@2x.webp");
  }
}

لماذا القيمة 192dpi؟
تُعرّف دقة الأساس المعيارية في CSS بأنها 96 نقطة في البوصة (DPI). وعند مضاعفتها لشاشة 2x، نحصل على $96 \times 2 = 192\text{dpi}$ (أو ما يُعرف بـ 2dppx أي نقاط لكل وحدة بكسل).

---

الفخ الخفي: Canvas وWebGL على الشاشات عالية الكثافة

إذا كنت تعمل مع عنصر الوسائط <canvas> في HTML5 (للرسوم البيانية أو الألعاب أو لوحات التوقيع الإلكتروني)، فستواجه مشكلة ضبابية DPR بشكل أكثر وضوحاً.

افتراضياً، ينشئ عنصر canvas مساحة رسم نقطية بناءً على خصائصه في HTML فقط:

<!-- عنصر كانفاس الافتراضي: ينشئ مخزن رسم بمقاس 300x150 بكسل فقط -->
<canvas id="chart"></canvas>

فإذا قمت بتنسيقه بواسطة CSS ليلائم تصميم الصفحة:

#chart {
  width: 300px;
  height: 150px;
}

على جهاز MacBook أو شاشة 4K، ستظهر الخطوط والنصوص المرسومة داخل canvas مشوشة وضبابية بصورة صادمة.

لماذا؟ لأن عنصر canvas أنشأ صورة نقطية بدقة 300 × 150 بكسل فقط، وقام المتصفح بمد تلك الصورة الصغيرة على مساحة مادية فعلية تبلغ 600 × 300 بكسل!

الطريقة الصحيحة لجعل HTML Canvas فائق الحدة على شاشات Retina:

لحل هذه المشكلة، يجب مضاعفة مساحة الرسم الداخلية لعنصر canvas بقيمة window.devicePixelRatio مع الحفاظ على أبعاد عرضه في CSS ثابتة:

const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");

// الحجم المطلوب في تخطيط CSS بالبكسل المنطقي
const cssWidth = 300;
const cssHeight = 150;

// استخراج قيمة DPR الحالية للشاشة
const dpr = window.devicePixelRatio || 1;

// 1. ضبط حجم المخزن المؤقت المادي بضربه في معدل DPR
canvas.width = cssWidth * dpr;
canvas.height = cssHeight * dpr;

// 2. تثبيت الحجم المرئي على الصفحة باستخدام بكسلات CSS
canvas.style.width = `${cssWidth}px`;
canvas.style.height = `${cssHeight}px`;

// 3. ضبط مقياس كافة عمليات الرسم لتظل الإحداثيات متوافقة مع وحدات CSS
ctx.scale(dpr, dpr);

// يمكنك الآن الرسم كالمعتاد وسيكون الناتج فائق النقاء والدقة!
ctx.fillStyle = "#2563eb";
ctx.fillRect(20, 20, 100, 50);

يضمن هذا الكود البسيط أن تعمل مكتبات الرسوم البيانية ومحركات الألعاب وتطبيقات الرسم بدقة ووضوح متناهيين على شاشات Retina.

---

الموازنة بين الأداء والوضوح: الوصول إلى النقطة الذهبية

الآن وقد تعلمت كيفية توفير صور بدقة 2x و3x، يطرح سؤال جوهري نفسه: هل يجب أن نرسل صوراً بدقة 3x لجميع الهواتف الذكية الحديثة؟

في أغلب الحالات، الإجابة هي لا.

وإليك الأسباب:

1. تناقص العوائد البصرية لعين الإنسان:
   عند حمل الهاتف الذكي على مسافة المشاهدة الطبيعية (25 إلى 30 سم)، تعجز العين البشرية عن تمييز البكسلات الفردية متى ما تجاوزت الكثافة 300 إلى 350 بكسل لكل بوصة (PPI). وتبدو الصورة المعروضة بدقة 2x على شاشة هاتف 3x مطابقة تقريباً لصورة 3x الحقيقية لأكثر من 99% من المستخدمين.

2. الزيادة الهائلة في أحجام الملفات:
   تتضاعف مساحة البكسلات بشكل تربيعي:

   • صورة 1x تحوي 1x من البيانات.
   • صورة 2x تحوي 4x من البيانات ($2 \times 2$).
   • صورة 3x تحوي 9x أضعاف البيانات ($3 \times 3$)!

   إن تقديم صور حقيقية بدقة 3x للصور الكبيرة قد يحول ملف صورة WebP بحجم معقول قدره 120 كيلوبايت إلى ملف ضخم يتجاوز 800 كيلوبايت. يستهلك ذلك باقات بيانات الجوال، ويضر بمؤشرات أداء الويب الحيوية (خاصة Core Web Vitals ومؤشر Largest Contentful Paint / LCP)، ويؤدي لبطء كبير في تحميل صفحاتك.

الممارسات الموصى بها:

• واجهات المستخدم المتجهة (الشعارات والأيقونات): استخدم دائماً SVG. وضوح مطلق وحجم ملف ضئيل للغاية.
• الصور الفوتوغرافية ولافتات العرض: اجعل الحد الأقصى لمحددات srcset عند 2.0x. فتقديم صور 2x لهواتف 3x يمنحك أكثر من 95% من الحدة البصرية مع توفير يصل إلى 60% من استهلاك البيانات!
• تقنيات الضغط الحديثة: اعتمد دائماً على صيغ WebP أو AVIF. ولأن الشاشات عالية الدقة تدمج البكسلات بكثافة عالية جداً، يمكنك تطبيق درجات ضغط أعلى قليلاً (جودة بين 75–80) بأمان تام دون أي تدهور بصري ملحوظ.

---

الأسئلة الشائعة (FAQ)

ما الفرق بين PPI وDPI وDPR؟

• PPI (بكسل لكل بوصة): الكثافة الفيزيائية للعتاد—أي عدد بواعث الضوء الفعلية الموجودة في بوصة طولية واحدة من الشاشة.
• DPI (نقطة لكل بوصة): مصطلح مستمد من الطباعة لوصف عدد نقاط الحبر في البوصة، ويستخدم غالباً في سياق تطوير الويب كمرادف لـ PPI.
• DPR (نسبة بكسل الجهاز): معامل برمجي تستخدمه المتصفحات وأنظمة التشغيل لتحويل وحدات التخطيط المنطقية (بكسلات CSS) إلى بكسلات مادية حقيقية على الشاشة.

لماذا تُظهر شاشة 4K لدي دقة تبلغ 1920 × 1080؟

إذا كانت لديك شاشة بدقة 4K (3840 × 2160) وكان نظام ويندوز أو ماك مضبوطاً على تكبير بنسبة 200%، فإن نظام التشغيل يخبر المتصفح بأن عرض سطح المكتب لديك هو 1920 × 1080 بكسل منطقي، بنسبة بكسل جهاز تبلغ 2.0.

تظل شاشتك تعرض دقة 4K الحقيقية بالكامل! ولكن نظام التشغيل يجمع كل 4 بكسلات مادية ($2 \times 2$) لعرض كل بكسل مكتبي منطقي، كي لا تصبح النصوص والنوافذ صغيرة جداً ومستحيلة القراءة.

هل يمكن أن تكون قيمة DPR رقماً كسرياً مثل 1.25 أو 1.5؟

نعم. في أجهزة ويندوز وChromeOS، يمكن للمستخدم تحديد نسب تكبير مخصصة مثل 125% أو 150% أو 175%. وعندما يضبط المستخدم مقياس التكبير على 150%، تصبح قيمة window.devicePixelRatio في المتصفح مساوية لـ 1.5.

هل يؤدي تكبير الصفحة في المتصفح إلى تغيير قيمة DPR؟

نعم! عندما تضغط على Ctrl + أو Cmd + لتكبير صفحة ويب، لا تقوم المتصفحات الحديثة بتمديد الصفحة ميكانيكياً كالعدسة المكبرة. بل تزيد من قيمة window.devicePixelRatio، مما يعيد حساب التخطيط ويحفز خصائص srcset لجلب أصول وصور أكثر حدة ودقة.

---

النقاط الرئيسية المستفادة

1. هناك نوعان من البكسلات: البكسلات المادية وهي الصمامات الضوئية على الشاشة، وبكسلات CSS وهي وحدات البناء المنطقية للمتصفح.
2. DPR هو معامل التحويل: يوضح لك DPR كم عدد النقاط المادية المستخدمة لرسم بكسل CSS واحد.
3. سر الضبابية: عندما تقدم الصورة بكسلاً واحداً فقط لمساحة تدعمها 4 أو 9 نقاط مادية، يضطر المتصفح لتمديدها وتخمين ألوانها، مما يسبب الضبابية.
4. اعتمد على SVG أولاً: أي شكل أو رمز أو شعار يمكن تمثيله بالمتجهات يجب أن يكون بصيغة SVG.
5. استهدف دقة 2x للصور الفوتوغرافية: في الصور النقطية، يوفر جلب أصول بدقة 2x عبر srcset حدة تضاهي شاشات ريتينا دون زيادة مفرطة في حجم الصفحة.

هل تريد معرفة المقاييس الدقيقة التي تسجلها شاشتك في هذه اللحظة؟ توجه إلى أداة الفحص الرئيسية في صفحتنا على WhatIsMyScreenResolutions.com لمعاينة مساحة إطار العرض، ودقة الشاشة، ونسبة بكسل الجهاز (DPR) مباشرة وبدقة متناهية.