px: مفهوم، پیکسلهای فیزیکی در توسعه موبایل
px — پیکسل فیزیکی، کوچکترین عنصر تصویر روی صفحه دستگاه. در توسعه موبایل px به عنوان واحد پایه وضوح صفحه و تراکم پیکسل (PPI) استفاده میشود، اما عملاً برای چیدمان رابطها به کار نمیرود — به جای آن از واحدهای منطقی pt، dp و sp استفاده میشود. مقاله توضیح میدهد px چه تفاوتی با واحدهای منطقی دارد، وضوح و PPI چگونه مرتبط هستند و چرا استفاده مستقیم از px در کد یک ضدالگو است.
نکات اصلی
- px — پیکسل فیزیکی نمایشگر که تراکم صفحه (PPI) را در نظر نمیگیرد
- وضوح صفحه بر حسب px — تعداد پیکسلها در عرض و ارتفاع، مثلاً 1179 × 2556 px
- PPI — تراکم پیکسل در هر اینچ، شاخص اصلی وضوح تصویر
- واحدهای منطقی (dp, pt, sp) px را انتزاع کرده و رابط را با صفحههای مختلف تطبیق میدهند
- استفاده از px در کد — ضدالگو، زیرا رابط بر روی دستگاههایی با تراکم متفاوت به درستی نمایش نمییابد
px چیست؟
px (pixel, picture element) — کوچکترین عنصر قابل آدرسدهی یک تصویر شطرنجی یا نمایشگر. هر پیکسل اطلاعات رنگ را در مدل RGB (قرمز، سبز، آبی) با عمق رنگ ۸ تا ۱۰ بیت بر کانال ذخیره میکند. نمایشگرهای مدرن دستگاههای موبایل میلیونها پیکسل دارند: iPhone 15 Pro — ۳ میلیون، iPad Pro ۱۲.۹" — ۵.۶ میلیون پیکسل.
اندازه فیزیکی پیکسل به تراکم نمایشگر (PPI) بستگی دارد. در دستگاهی با ۳۲۶ PPI (iPhone 11) یک پیکسل تقریباً ۰.۰۷۸ میلیمتر اندازه دارد. در نمایشگر با ۴۶۰ PPI (iPhone 15 Pro) — ۰.۰۵۵ میلیمتر. هرچه اندازه فیزیکی پیکسل کوچکتر باشد، وضوح تصویر بالاتر است. تراکم پیکسل مستقیماً بر عملکرد رندر تأثیر میگذارد: پیکسل بیشتر = کار بیشتر برای GPU.
به گفته Apple، وضوح نمایشگر iPhone 15 Pro ۱۱۷۹ × ۲۵۵۶ px با تراکم ۴۶۰ PPI است. برای مقایسه، iPhone SE (3rd gen) — ۷۵۰ × ۱۳۳۴ px با ۳۲۶ PPI. تفاوت در تعداد کل پیکسلها تقریباً ۳ برابر است که نیازهای بالاتر GPU در مدلهای Pro را توضیح میدهد.
وضوح صفحه به پیکسل
وضوح صفحه — تعداد پیکسلهای فیزیکی در افقی و عمودی. به صورت عرض × ارتفاع نوشته میشود، مثلاً ۱۱۷۹ × ۲۵۵۶ px. وضوح یک ویژگی اساسی نمایشگر است که نمیتوان آن را به صورت برنامهای تغییر داد — در سطح سختافزار و ماتریس ثابت شده است.
| دستگاه | وضوح (px) | PPI | نسبت ابعاد |
|---|---|---|---|
| iPhone SE (3rd gen) | ۷۵۰ × ۱۳۳۴ | ۳۲۶ | ۱۶:۹ |
| iPhone 14 | ۱۱۷۰ × ۲۵۳۲ | ۴۶۰ | ۱۹.۵:۹ |
| iPhone 15 Pro Max | ۱۲۹۰ × ۲۷۹۶ | ۴۶۰ | ۱۹.۵:۹ |
| Samsung Galaxy S24 Ultra | ۱۴۴۰ × ۳۱۲۰ | ۵۰۵ | ۱۹.۵:۹ |
| Google Pixel 8 Pro | ۱۳۴۴ × ۲۹۹۲ | ۴۹۰ | ۲۰:۹ |
| iPad Pro ۱۲.۹" | ۲۰۴۸ × ۲۷۳۲ | ۲۶۴ | ۴:۳ |
وضوح بر حسب پیکسل نباید با اندازه منطقی صفحه (بر حسب pt برای iOS یا dp برای Android) اشتباه گرفته شود. مثلاً iPhone 14 اندازه منطقی ۳۹۰ × ۸۴۴ pt دارد اما وضوح فیزیکی ۱۱۷۰ × ۲۵۳۲ px — دقیقاً ۳ برابر بیشتر، زیرا ضریب مقیاس برابر ۳ است.
PPI و تراکم پیکسل
PPI (pixels per inch) — تعداد پیکسلها در یک اینچ نمایشگر. با فرمول محاسبه میشود: PPI = √(عرض² + ارتفاع²) / قطر. هرچه PPI بالاتر باشد، پیکسلهای جداگانه کوچکتر و تصویر صافتر به نظر میرسد. Apple نمایشگری با PPI بالای ۳۰۰ در فاصله مشاهده معمولی را Retina میداند.
دستههای مختلف دستگاهها تراکم متفاوتی دارند: ساعت Apple Watch — ۳۲۶ PPI، iPhone — ۳۲۶–۴۶۰ PPI، iPad — ۲۶۴ PPI، MacBook Pro — ۲۵۴–۲۶۴ PPI. دستگاههای Android تراکم را از طریق Density Buckets طبقهبندی میکنند: mdpi (۱۶۰ dpi)، hdpi (۲۴۰)، xhdpi (۳۲۰)، xxhdpi (۴۸۰)، xxxhdpi (۶۴۰). این سطلها مشخص میکنند کدام منبع (تصویر، dimens) برای دستگاه بارگذاری شود.
تأثیر PPI بر توسعه: هرچه تراکم بالاتر باشد، حافظه بیشتری برای ذخیره بافتها و تصاویر نیاز است. پیکسل در نمایشگر با ۵۰۰ PPI نسبت به نمایشگر با ۳۲۰ PPI در اندازه منطقی یکسان، ۲.۵ برابر حافظه GPU بیشتری نیاز دارد. بهینهسازی داراییها برای سطلهای تراکم خاص — روشی استاندارد در توسعه Android است.
px در مقابل واحدهای منطقی: pt، dp، sp
پیکسلهای فیزیکی (px) با واحدهای منطقی (pt، dp، sp) تفاوت دارند زیرا به وضوح سختافزاری متصل هستند و مقیاسپذیر نیستند. واحدهای منطقی برعکس، توسعهدهنده را از نمایشگر خاص انتزاع میکنند و به یک مقدار ۱۰۰ pt اجازه میدهند با اندازه فیزیکی یکسان در دستگاههای مختلف نمایش داده شود.
| واحد | پلتفرم | وابسته به PPI | مقیاسپذیر | برای چه |
|---|---|---|---|---|
| px | همه | بله (پیکسل فیزیکی) | خیر | تصاویر، بافرها، Metal |
| pt | iOS/macOS | خیر (نقطه منطقی) | scale factor | Layout، UIKit، SwiftUI |
| dp | Android | خیر (مستقل از تراکم) | density bucket | Layout، اندازه عناصر |
| sp | Android | خیر (مستقل از مقیاس) | density + font scale | متن (textSize) |
فرمولهای تبدیل: برای iOS — px = pt × scale (scale = ۱، ۲ یا ۳). برای Android — px = dp × (dpi / ۱۶۰). استفاده مستقیم از px در کد به این معنی است که رابط در دستگاههایی با تراکم مختلف متفاوت به نظر میرسد: در صفحه با PPI بالا عنصر خیلی کوچک و در PPI پایین خیلی بزرگ خواهد بود.
چرا px در کد استفاده نمیشود
استفاده از px در کد منبع یک اپلیکیشن موبایل — ضدالگویی که منجر به نمایش نادرست رابط در دستگاههایی با تراکم پیکسل متفاوت میشود. فریمورکهای مدرن (UIKit، SwiftUI، Jetpack Compose، XML Layouts) تعیین اندازهها به پیکسل را ممنوع یا توصیه نمیکنند.
- iOS UIKit — تمام frame، bounds و constraint constants به pt تنظیم میشوند. پیکسلها فقط در مرحله شطرنجیسازی از طریق UIGraphicsImageRenderer ظاهر میشوند
- SwiftUI — API برای تعیین اندازه به px وجود ندارد. همه مقادیر از طریق Font، frame، padding به pt هستند
- 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 (۱×)، drawable-hdpi (۱.۵×)، drawable-xhdpi (۲×)، drawable-xxhdpi (۳×)، drawable-xxxhdpi (۴×) استفاده میکند. سیستم به طور خودکار فایل مناسب را بر اساس تراکم صفحه انتخاب میکند.
| iOS scale | Android bucket | ضریب | مثال (۴۸ pt/dp) |
|---|---|---|---|
| @1x | mdpi (۱۶۰ dpi) | ۱× | ۴۸ × ۴۸ px |
| @2x | xhdpi (۳۲۰ dpi) | ۲× | ۹۶ × ۹۶ px |
| @3x | xxhdpi (۴۸۰ dpi) | ۳× | ۱۴۴ × ۱۴۴ px |
| — | xxxhdpi (۶۴۰ dpi) | ۴× | ۱۹۲ × ۱۹۲ px |
قانون ارائه داراییها: تصویر را در فرمت برداری (PDF، SVG) ایجاد کنید و به کپیهای شطرنجی با اندازههای مورد نیاز صادر کنید. داراییهای برداری بدون افت کیفیت مقیاس میشوند و فضای کمتری در مخزن اشغال میکنند. در Android منابع برداری میتوانند مستقیماً از طریق VectorDrawable استفاده شوند که نیاز به کپیهای شطرنجی متعدد را از بین میبرد.
سؤالات متداول
تفاوت بین px و dp چیست؟
px — پیکسل فیزیکی صفحه. dp (density-independent pixel) — واحد منطقی Android، برابر با ۱ px در صفحه با تراکم ۱۶۰ dpi. در تراکمهای مختلف dp به طور خودکار به تعداد متفاوت px تبدیل میشود و اندازه فیزیکی عنصر را حفظ میکند.
چرا نمیتوان اندازهها را به px در کد مشخص کرد؟
زیرا px تراکم صفحه را در نظر نمیگیرد. عنصری با اندازه ۱۰۰ px در دستگاههایی با PPI متفاوت ظاهر متفاوتی خواهد داشت: در صفحه ۳۲۶ PPI بزرگتر از ۴۶۰ PPI خواهد بود. واحدهای منطقی (dp، pt، sp) این مشکل را به طور خودکار حل میکنند.
PPI چیست و چگونه محاسبه میشود؟
PPI (pixels per inch) — تعداد پیکسلها در هر اینچ نمایشگر. با فرمول محاسبه میشود: PPI = √(w² + h²) / d، که w و h وضوح بر حسب px، d قطر بر حسب اینچ است. هرچه PPI بالاتر باشد، تصویر واضحتر است. نمایشگر Retina Apple از ۳۰۰ PPI شروع میشود.
چه زمانی استفاده از px موجه است؟
px هنگام کار با بافرهای شطرنجی موجه است: ایجاد Bitmap، رندر در Canvas، برنامهنویسی shaderهای Metal/OpenGL، پردازش تصاویر دوربین. در layout و تایپوگرافی 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 در layout و تایپوگرافی؛ حوزه صحیح — بافرهای شطرنجی
- داراییها در وضوحهای مختلف ارائه میشوند (@1x/@2x/@3x برای iOS، density buckets برای Android)
- فرمتهای برداری (PDF، SVG، VectorDrawable) بهتر از کپیهای شطرنجی متعدد هستند
ما یک اپلیکیشن موبایل به صورت کلید در دست توسعه خواهیم داد
IT Sectr از سال 2017 برنامههای iOS و Android را برای استارتاپها و کسبوکارها ایجاد میکند. ما به شما مشاوره میدهیم و بهترین راهحل را پیشنهاد خواهیم کرد.
همچنین بخوانید