px: podstata, fyzické pixely v mobilním vývoji
px — fyzický pixel, minimální prvek obrazu na obrazovce zařízení. V mobilním vývoji se px používá jako základní jednotka rozlišení obrazovky a hustoty pixelů (PPI), ale prakticky se nepoužívá pro rozvržení rozhraní — místo něj se používají logické jednotky pt, dp a sp. Článek vysvětluje, čím se px liší od logických jednotek, jak souvisí rozlišení a PPI a proč je přímé použití px v kódu antipattern.
Hlavní body
- px — fyzický pixel displeje, který nezohledňuje hustotu obrazovky (PPI)
- Rozlišení obrazovky v px — počet pixelů na šířku a výšku, např. 1179 × 2556 px
- PPI — hustota pixelů na palec, hlavní ukazatel ostrosti obrazu
- Logické jednotky (dp, pt, sp) abstrahují px a přizpůsobují rozhraní různým obrazovkám
- Použití px v kódu — antipattern, protože rozhraní se nebude správně zobrazovat na zařízeních s různou hustotou
Co je px?
px (pixel, picture element) — nejmenší adresovatelný prvek rastrového obrázku nebo displeje. Každý pixel ukládá informaci o barvě v modelu RGB (červená, zelená, modrá) s barevnou hloubkou 8 až 10 bitů na kanál. Moderní displeje mobilních zařízení obsahují miliony pixelů: iPhone 15 Pro — 3 miliony, iPad Pro 12.9" — 5.6 milionů pixelů.
Fyzická velikost pixelu závisí na hustotě displeje (PPI). Na zařízení s 326 PPI (iPhone 11) má jeden pixel velikost přibližně 0.078 mm. Na displeji s 460 PPI (iPhone 15 Pro) — 0.055 mm. Čím menší je fyzická velikost pixelu, tím vyšší je ostrost obrazu. Hustota pixelů přímo ovlivňuje výkon vykreslování: více pixelů = více práce pro GPU.
Podle údajů Apple je rozlišení displeje iPhone 15 Pro 1179 × 2556 px při hustotě 460 PPI. Pro srovnání, iPhone SE (3rd gen) — 750 × 1334 px při 326 PPI. Rozdíl v celkovém počtu pixelů je téměř 3násobný, což vysvětluje vyšší nároky na GPU u modelů Pro.
Rozlišení obrazovky v pixelech
Rozlišení obrazovky — počet fyzických pixelů horizontálně a vertikálně. Zapisuje se ve formátu šířka × výška, např. 1179 × 2556 px. Rozlišení je základní charakteristika displeje, kterou nelze změnit programově — je fixována na úrovni hardwaru a matice.
| Zařízení | Rozlišení (px) | PPI | Poměr stran |
|---|---|---|---|
| iPhone SE (3rd gen) | 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 |
Rozlišení v pixelech by nemělo být zaměňováno s logickou velikostí obrazovky (v pt pro iOS nebo dp pro Android). Například iPhone 14 má logickou velikost 390 × 844 pt, ale fyzické rozlišení 1170 × 2532 px — přesně 3krát větší, protože faktor měřítka je 3.
PPI a hustota pixelů
PPI (pixels per inch) — počet pixelů připadajících na jeden palec displeje. Vypočítá se podle vzorce: PPI = √(šířka² + výška²) / úhlopříčka. Čím vyšší je PPI, tím jemnější jsou jednotlivé pixely a tím hladší obraz vypadá. Apple považuje za Retina displej obrazovku s PPI nad 300 při typické vzdálenosti sledování.
Různé kategorie zařízení mají různou hustotu: hodinky Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Zařízení Android klasifikují hustotu pomocí Density Buckets: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Tyto kbelíky určují, který zdroj (obrázek, dimens) se pro zařízení načte.
Vliv PPI na vývoj: čím vyšší hustota, tím více paměti je potřeba pro ukládání textur a obrázků. Pixel na displeji s 500 PPI vyžaduje 2.5krát více paměti GPU než na displeji s 320 PPI při stejné logické velikosti prvku. Optimalizace assetů pro konkrétní kbelíky hustoty je standardní praxí ve vývoji pro Android.
px vs logické jednotky: pt, dp, sp
Fyzické pixely (px) se liší od logických jednotek (pt, dp, sp) tím, že jsou vázány na hardwarové rozlišení a neškálují se. Logické jednotky naopak abstrahují vývojáře od konkrétního displeje a umožňují stejné hodnotě 100 pt zobrazit se se stejnou fyzickou velikostí na různých zařízeních.
| Jednotka | Platforma | Závisí na PPI | Škáluje se | K čemu |
|---|---|---|---|---|
| px | Vše | Ano (fyzický pixel) | Ne | Obrázky, buffery, Metal |
| pt | iOS/macOS | Ne (logický bod) | scale factor | Layout, UIKit, SwiftUI |
| dp | Android | Ne (nezávislý na hustotě) | density bucket | Layout, velikosti prvků |
| sp | Android | Ne (nezávislý na měřítku) | density + font scale | Text (textSize) |
Vzorce pro přepočet: pro iOS — px = pt × scale (kde scale = 1, 2 nebo 3). Pro Android — px = dp × (dpi / 160). Přímé použití px v kódu znamená, že rozhraní bude vypadat jinak na zařízeních s různou hustotou: na obrazovce s vysokým PPI bude prvek příliš malý, na nízkém PPI — příliš velký.
Proč se px nepoužívá v kódu
Použití px ve zdrojovém kódu mobilní aplikace — antipattern, který vede k nesprávnému zobrazení rozhraní na zařízeních s různou hustotou pixelů. Moderní frameworky (UIKit, SwiftUI, Jetpack Compose, XML Layouts) zakazují nebo nedoporučují zadávání rozměrů v pixelech.
- iOS UIKit — všechny frame, bounds a constraint constants se zadávají v pt. Pixely se objevují až ve fázi rasterizace přes UIGraphicsImageRenderer
- SwiftUI — neexistuje API pro zadávání rozměrů v px. Všechny hodnoty jsou pt přes Font, frame, padding
- Android XML — pokud zadáte px v dimens.xml, Android Studio zobrazí lint varování: "Use \`sp\` instead of \`px\` for text sizes"
- Jetpack Compose — TextUnit pro text, Dp pro prvky. Překladač neumožňuje míchání typů
Jediné legitimní použití px v kódu — práce s rastrovými buffery: načítání Bitmap, vytváření Canvas pro vykreslování obrázků, práce s Metal nebo OpenGL. V těchto případech jsou px fyzické pixely cílového bufferu a je třeba je zohlednit pro správné vykreslení. Ve všech ostatních případech se používají logické jednotky.
Pixely v obrázcích a assety
Obrázky a ikony se ukládají v pixelech, ale pro každý typ obrazovky jsou dodávány různé verze. iOS používá přípony @1x, @2x, @3x v Assets.xcassets. Android používá složky drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×). Systém automaticky vybere správný soubor na základě hustoty obrazovky.
| iOS scale | Android kbelík | Faktor | Příklad (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 |
Pravidlo dodávání assetů: vytvořte obrázek ve vektorovém formátu (PDF, SVG) a exportujte do rastrových kopií požadovaných velikostí. Vektorové assety se škálují bez ztráty kvality a zabírají méně místa v repozitáři. V Androidu lze vektorové zdroje použít přímo přes VectorDrawable, což eliminuje potřebu mnoha rastrových kopií.
Často kladené otázky
Jaký je rozdíl mezi px a dp?
px — fyzický pixel obrazovky. dp (density-independent pixel) — logická jednotka Androidu, rovná 1 px na obrazovce s hustotou 160 dpi. Při různých hustotách se dp automaticky převádí na různý počet px, přičemž zachovává fyzickou velikost prvku.
Proč nelze zadávat rozměry v px v kódu?
Protože px nezohledňuje hustotu obrazovky. Prvek o velikosti 100 px bude vypadat jinak na zařízeních s různým PPI: na obrazovce 326 PPI bude větší než na 460 PPI. Logické jednotky (dp, pt, sp) tento problém řeší automaticky.
Co je PPI a jak se vypočítá?
PPI (pixels per inch) — počet pixelů na palec displeje. Vypočítá se podle vzorce: PPI = √(w² + h²) / d, kde w a h — rozlišení v px, d — úhlopříčka v palcích. Čím vyšší je PPI, tím ostřejší je obraz. Retina displej Apple začíná od 300 PPI.
Kdy je použití px oprávněné?
px je oprávněné při práci s rastrovými buffery: vytváření Bitmap, vykreslování v Canvas, programování shaderů Metal/OpenGL, zpracování obrázků z kamery. V layoutu a typografii se px nepoužívá — aplikují se pt (iOS), dp a sp (Android).
Jak zjistit rozlišení obrazovky v px?
V iOS: UIScreen.main.nativeBounds vrací velikost v px. V Androidu: DisplayMetrics.widthPixels a heightPixels z context.resources.displayMetrics. Ve SwiftUI: GeometryReader vrací velikost v pt, pro px je třeba vynásobit displayScale.
Shrnutí
- px — fyzický pixel displeje, základní jednotka rozlišení obrazovky
- Rozlišení — počet pixelů na šířku a výšku, fixováno na hardwarové úrovni
- PPI — hustota pixelů na palec, určuje ostrost obrazu a nároky na GPU
- Logické jednotky (pt, dp, sp) abstrahují px a přizpůsobují rozhraní libovolným obrazovkám
- Antipattern — použití px v layoutu a typografii, správná oblast — rastrové buffery
- Assety se dodávají v různých rozlišeních (@1x/@2x/@3x pro iOS, density buckets pro Android)
- Vektorové formáty (PDF, SVG, VectorDrawable) jsou preferovány před mnoha rastrovými kopiemi
Vyvineme mobilní aplikaci na klíč
IT Sectr vytváří aplikace pro iOS a Android pro startupy a podniky od roku 2017. Poradíme vám a navrhneme nejlepší řešení.
Přečtěte si také