px: الجوهر، البكسلات المادية في تطوير التطبيقات المحمولة
px — بكسل مادي، أصغر عنصر في الصورة على شاشة الجهاز. في تطوير التطبيقات المحمولة، يُستخدم px كوحدة أساسية لدقة الشاشة وكثافة البكسلات (PPI)، لكنه عملياً لا يُستخدم في تخطيط الواجهات — بدلاً من ذلك تُستخدم الوحدات المنطقية pt و dp و sp. تشرح المقالة كيف يختلف px عن الوحدات المنطقية، وكيف ترتبط الدقة و PPI، ولماذا استخدام px مباشرة في الكود هو نمط معاكس.
أهم النقاط
- px — بكسل مادي للشاشة لا يأخذ في الاعتبار كثافة الشاشة (PPI)
- دقة الشاشة بالبكسل — عدد البكسلات في العرض والارتفاع، مثلاً 1179 × 2556 px
- PPI — بكسل لكل بوصة، المؤشر الرئيسي لوضوح الصورة
- الوحدات المنطقية (dp, pt, sp) تجرد px وتكيّف الواجهة مع الشاشات المختلفة
- استخدام px في الكود هو نمط معاكس لأن الواجهة لن تظهر بشكل صحيح على الأجهزة ذات الكثافات المختلفة
ما هو px؟
px (بكسل، عنصر الصورة) — أصغر عنصر قابل للعنونة في الصورة النقطية أو الشاشة. يخزن كل بكسل معلومات اللون في نموذج RGB (أحمر، أخضر، أزرق) بعمق لون من 8 إلى 10 بت لكل قناة. تحتوي شاشات الأجهزة المحمولة الحديثة على ملايين البكسلات: iPhone 15 Pro — 3 ملايين، iPad Pro 12.9" — 5.6 مليون بكسل.
يعتمد الحجم المادي للبكسل على كثافة الشاشة (PPI). على جهاز 326 PPI (iPhone 11)، يبلغ حجم البكسل الواحد حوالي 0.078 مم. على شاشة 460 PPI (iPhone 15 Pro) — 0.055 مم. كلما كان الحجم المادي للبكسل أصغر، زادت وضوح الصورة. وفي نفس الوقت، تؤثر كثافة البكسلات مباشرة على أداء العرض: بكسلات أكثر = عمل أكثر لوحدة معالجة الرسوميات (GPU).
وفقاً لشركة Apple، تبلغ دقة شاشة iPhone 15 Pro 1179 × 2556 px بكثافة 460 PPI. للمقارنة، iPhone SE (الجيل الثالث) — 750 × 1334 px بكثافة 326 PPI. الفرق في إجمالي عدد البكسلات هو 3 مرات تقريباً، مما يفسر متطلبات GPU الأعلى في موديلات Pro.
دقة الشاشة بالبكسلات
دقة الشاشة — عدد البكسلات المادية أفقياً وعمودياً. تُكتب بتنسيق العرض × الارتفاع، مثلاً 1179 × 2556 px. الدقة هي خاصية أساسية للشاشة لا يمكن تغييرها برمجياً — فهي مثبتة على مستوى الأجهزة والمصفوفة.
| الجهاز | الدقة (px) | PPI | نسبة العرض إلى الارتفاع |
|---|---|---|---|
| iPhone SE (الجيل الثالث) | 750 × 1334 | 326 | 16:9 |
| iPhone 14 | 1170 × 2532 | 460 | 19.5:9 |
| iPhone 15 Pro Max | 1290 × 2796 | 460 | 19.5:9 |
| Samsung Galaxy S24 Ultra | 1440 × 3120 | 505 | 19.5:9 |
| Google Pixel 8 Pro | 1344 × 2992 | 490 | 20:9 |
| iPad Pro 12.9" | 2048 × 2732 | 264 | 4:3 |
لا ينبغي الخلط بين الدقة بالبكسلات والحجم المنطقي للشاشة (بوحدة pt لنظام iOS أو dp لنظام Android). على سبيل المثال، iPhone 14 له حجم منطقي 390 × 844 pt، لكن دقة مادية 1170 × 2532 px — أكبر بثلاث مرات بالضبط، لأن عامل القياس يساوي 3.
PPI وكثافة البكسلات
PPI (بكسل لكل بوصة) — عدد البكسلات في البوصة الواحدة من الشاشة. يُحسب بالمعادلة: PPI = √(العرض² + الارتفاع²) / القطر. كلما زاد PPI، كانت البكسلات الفردية أصغر وكانت الصورة أكثر نعومة. تعتبر Apple أن شاشة Retina هي شاشة ذات PPI أعلى من 300 على مسافة مشاهدة نموذجية.
تختلف كثافة فئات الأجهزة المختلفة: Apple Watch — 326 PPI، iPhone — 326–460 PPI، iPad — 264 PPI، MacBook Pro — 254–264 PPI. تصنف أجهزة Android الكثافة عبر Density Buckets: mdpi (160 dpi)، hdpi (240)، xhdpi (320)، xxhdpi (480)، xxxhdpi (640). تحدد هذه المجموعات أي مورد (صورة، dimens) سيتم تحميله للجهاز.
تأثير PPI على التطوير: كلما زادت الكثافة، زادت الذاكرة المطلوبة لتخزين القوام والصور. يتطلب البكسل على شاشة 500 PPI ذاكرة GPU أكثر بمقدار 2.5 مرة من شاشة 320 PPI لنفس الحجم المنطقي للعنصر. تحسين الأصول لمجموعات كثافة محددة هو ممارسة قياسية في تطوير Android.
px مقابل الوحدات المنطقية: pt، dp، sp
تختلف البكسلات المادية (px) عن الوحدات المنطقية (pt, dp, sp) من حيث أنها مرتبطة بدقة الأجهزة ولا يتم قياسها. الوحدات المنطقية، على العكس من ذلك، تجرد المطور من الشاشة المحددة، مما يسمح لقيمة واحدة 100 pt بالظهور بنفس الحجم المادي على أجهزة مختلفة.
| الوحدة | المنصة | تعتمد على PPI | قابلة للقياس | الغرض |
|---|---|---|---|---|
| px | الكل | نعم (بكسل مادي) | لا | الصور، المخازن المؤقتة، Metal |
| pt | iOS/macOS | لا (نقطة منطقية) | عامل القياس | التخطيط، UIKit، SwiftUI |
| dp | Android | لا (مستقل عن الكثافة) | مجموعة الكثافة | التخطيط، أحجام العناصر |
| sp | Android | لا (مستقل عن القياس) | الكثافة + مقياس الخط | النص (textSize) |
معادلات التحويل: لنظام iOS — px = pt × scale (حيث scale = 1 أو 2 أو 3). لنظام Android — px = dp × (dpi / 160). الاستخدام المباشر لـ px في الكود يعني أن الواجهة ستبدو مختلفة على الأجهزة ذات الكثافات المختلفة: على شاشة PPI عالية سيكون العنصر صغيراً جداً، وعلى شاشة PPI منخفضة — كبيراً جداً.
لماذا لا يُستخدم px في الكود
استخدام px في الكود المصدري لتطبيق المحمول هو نمط معاكس يؤدي إلى عرض غير صحيح للواجهة على الأجهزة ذات كثافات البكسلات المختلفة. الأطر الحديثة (UIKit، SwiftUI، Jetpack Compose، XML Layouts) تمنع أو لا توصي بتحديد الأحجام بالبكسلات.
- iOS UIKit — جميع frame و bounds و constraint constants تُضبط بوحدة pt. تظهر البكسلات فقط في مرحلة التنقيط عبر UIGraphicsImageRenderer
- SwiftUI — لا يوجد API لتحديد الأحجام بـ px. جميع القيم بوحدة pt عبر Font، frame، padding
- Android XML — إذا حددت px في dimens.xml، يعرض Android Studio تحذير lint: "Use `sp` instead of `px` for text sizes"
- Jetpack Compose — TextUnit للنص، Dp للعناصر. المترجم لا يسمح بخلط الأنواع
الاستخدام الشرعي الوحيد لـ px في الكود هو العمل مع الصور النقطية: تحميل Bitmap، إنشاء Canvas لعرض الصور، العمل مع Metal أو OpenGL. في هذه الحالات، px هي البكسلات المادية للمخزن المؤقت المستهدف، ويجب أخذها في الاعتبار للعرض الصحيح. في جميع الحالات الأخرى، تُستخدم الوحدات المنطقية.
البكسلات في الصور والأصول
تُخزَّن الصور والأيقونات بالبكسلات، ولكن يتم توفير إصدارات مختلفة لكل نوع شاشة. يستخدم iOS اللواحق @1x و @2x و @3x في Assets.xcassets. يستخدم Android المجلدات drawable-mdpi (1×)، drawable-hdpi (1.5×)، drawable-xhdpi (2×)، drawable-xxhdpi (3×)، drawable-xxxhdpi (4×). يختار النظام تلقائياً الملف الصحيح بناءً على كثافة الشاشة.
| مقياس iOS | مجموعة Android | المعامل | مثال (48 pt/dp) |
|---|---|---|---|
| @1x | mdpi (160 dpi) | 1× | 48 × 48 px |
| @2x | xhdpi (320 dpi) | 2× | 96 × 96 px |
| @3x | xxhdpi (480 dpi) | 3× | 144 × 144 px |
| — | xxxhdpi (640 dpi) | 4× | 192 × 192 px |
قاعدة توفير الأصول: أنشئ الصورة بتنسيق متجه (PDF, SVG) وقم بتصديرها إلى نسخ نقطية بالأحجام المطلوبة. الأصول المتجهة تُقاس دون فقدان الجودة وتشغل مساحة أقل في المستودع. في Android، يمكن استخدام الموارد المتجهة مباشرة عبر VectorDrawable، مما يلغي الحاجة إلى نسخ نقطية متعددة.
الأسئلة الشائعة
ما الفرق بين px و dp؟
px — بكسل مادي للشاشة. dp (بكسل مستقل عن الكثافة) — وحدة منطقية في Android تساوي 1 px على شاشة بكثافة 160 dpi. عند كثافات مختلفة، يتحول dp تلقائياً إلى عدد مختلف من px، مع الحفاظ على الحجم المادي للعنصر.
لماذا لا يمكن تحديد الأحجام بـ px في الكود؟
لأن px لا يأخذ في الاعتبار كثافة الشاشة. سيبدو عنصر بحجم 100 px مختلفاً على الأجهزة ذات PPI مختلف: على شاشة 326 PPI سيكون أكبر من شاشة 460 PPI. الوحدات المنطقية (dp, pt, sp) تحل هذه المشكلة تلقائياً.
ما هو PPI وكيف يُحسب؟
PPI (بكسل لكل بوصة) — عدد البكسلات في البوصة الواحدة من الشاشة. يُحسب بالمعادلة: PPI = √(w² + h²) / d، حيث w و h هما الدقة بـ px، d هو القطر بالبوصات. كلما زاد PPI، كانت الصورة أوضح. تبدأ شاشة Retina من Apple من 300 PPI.
متى يكون استخدام px مبرراً؟
px مبرر عند العمل مع المخازن المؤقتة النقطية: إنشاء Bitmap، العرض في Canvas، برمجة تظليل Metal/OpenGL، معالجة الصور من الكاميرا. في التخطيط والطباعة، لا يُستخدم px — تُطبق pt (iOS)، dp و sp (Android).
كيف تعرف دقة الشاشة بـ px؟
في iOS: UIScreen.main.nativeBounds يعيد الحجم بـ px. في Android: DisplayMetrics.widthPixels و heightPixels من context.resources.displayMetrics. في SwiftUI: GeometryReader يعيد الحجم بـ pt، للحصول على px يجب الضرب في displayScale.
الخلاصة
- px — بكسل مادي للشاشة، الوحدة الأساسية لدقة الشاشة
- الدقة — عدد البكسلات أفقياً وعمودياً، مثبتة على مستوى الأجهزة
- PPI — بكسل لكل بوصة، يحدد وضوح الصورة ومتطلبات GPU
- الوحدات المنطقية (pt, dp, sp) تجرد px وتكيّف الواجهة مع أي شاشة
- نمط معاكس — استخدام px في التخطيط والطباعة؛ المجال الصحيح هو المخازن المؤقتة النقطية
- الأصول تُوفر بدقات مختلفة (@1x/@2x/@3x لنظام iOS، density buckets لنظام Android)
- التنسيقات المتجهة (PDF, SVG, VectorDrawable) أفضل من النسخ النقطية المتعددة
سنقوم بتطوير تطبيق جوال جاهز
تقدم IT Sectr تطبيقات iOS وAndroid للشركات الناشئة والشركات منذ عام 2017. سوف نقدم لك النصح ونقترح أفضل حل.
اقرأ أيضًا