px: lényeg, fizikai pixelek a mobilfejlesztésben
px — fizikai pixel, a kép legkisebb eleme a készülék képernyőjén. A mobilfejlesztésben a px a képernyőfelbontás és pixelsűrűség (PPI) alapegységeként szolgál, de a felületek elrendezéséhez gyakorlatilag nem használják — helyette a pt, dp és sp logikai egységeket alkalmazzák. A cikk elmagyarázza, hogy miben különbözik a px a logikai egységektől, hogyan függ össze a felbontás és a PPI, valamint hogy miért antiminta a px közvetlen használata a kódban.
Főbb pontok
- px — a kijelző fizikai képpontja, amely nem veszi figyelembe a képernyő sűrűségét (PPI)
- Képernyőfelbontás px-ben — a pixelek száma szélességben és magasságban, pl. 1179 × 2556 px
- PPI — pixelsűrűség hüvelykenként, a képélesség fő mutatója
- Logikai egységek (dp, pt, sp) elvonatkoztatják a px-et és a felületet különböző képernyőkhöz igazítják
- A px használata kódban — antiminta, mivel a felület nem jelenik meg megfelelően a különböző sűrűségű eszközökön
Mi az a px?
px (pixel, picture element) — egy raszteres kép vagy kijelző legkisebb címezhető eleme. Minden pixel színinformációt tárol az RGB-modellben (piros, zöld, kék) 8–10 bites színmélységgel csatornánként. A modern mobileszközök kijelzői több millió pixelt tartalmaznak: iPhone 15 Pro — 3 millió, iPad Pro 12.9" — 5.6 millió pixel.
A pixel fizikai mérete a kijelző sűrűségétől (PPI) függ. Egy 326 PPI-s (iPhone 11) készüléken egy pixel mérete körülbelül 0.078 mm. Egy 460 PPI-s (iPhone 15 Pro) kijelzőn — 0.055 mm. Minél kisebb a pixel fizikai mérete, annál nagyobb a kép élessége. A pixelsűrűség közvetlenül befolyásolja a renderelési teljesítményt: több pixel = több munka a GPU számára.
Az Apple adatai szerint az iPhone 15 Pro kijelzőjének felbontása 1179 × 2556 px 460 PPI sűrűség mellett. Összehasonlításképpen, iPhone SE (3rd gen) — 750 × 1334 px 326 PPI mellett. A teljes pixelszámban mutatkozó különbség csaknem háromszoros, ami megmagyarázza a magasabb GPU-követelményeket a Pro modelleken.
Képernyőfelbontás pixelekben
Képernyőfelbontás — a fizikai pixelek száma vízszintesen és függőlegesen. Formátuma: szélesség × magasság, pl. 1179 × 2556 px. A felbontás a kijelző alapvető jellemzője, amelyet programozottan nem lehet megváltoztatni — hardver- és mátrixszinten rögzített.
| Eszköz | Felbontás (px) | PPI | Képarány |
|---|---|---|---|
| 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 |
A pixelben mért felbontást nem szabad összetéveszteni a képernyő logikai méretével (iOS-en pt-ben, Androidon dp-ben). Például az iPhone 14 logikai mérete 390 × 844 pt, de fizikai felbontása 1170 × 2532 px — pontosan háromszor nagyobb, mivel a skálázási tényező 3.
PPI és pixelsűrűség
PPI (pixels per inch) — a kijelző egy hüvelykére jutó pixelek száma. Képlete: PPI = √(szélesség² + magasság²) / átló. Minél magasabb a PPI, annál finomabbak az egyes pixelek és annál simább a kép. Az Apple a 300 PPI feletti kijelzőt tekinti Retina kijelzőnek tipikus nézési távolságon.
A különböző eszközkategóriák eltérő sűrűséggel rendelkeznek: Apple Watch — 326 PPI, iPhone — 326–460 PPI, iPad — 264 PPI, MacBook Pro — 254–264 PPI. Az Android-eszközök a sűrűséget Density Buckets segítségével osztályozzák: mdpi (160 dpi), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640). Ezek a vödrök határozzák meg, hogy melyik erőforrás (kép, dimens) töltődjön be az eszközhöz.
A PPI hatása a fejlesztésre: minél nagyobb a sűrűség, annál több memória szükséges a textúrák és képek tárolásához. Egy pixel egy 500 PPI-s kijelzőn 2.5-szer több GPU-memóriát igényel, mint egy 320 PPI-s kijelzőn azonos logikai elem méret mellett. Az eszközök adott sűrűségű vödrökhöz való optimalizálása standard gyakorlat az Android-fejlesztésben.
px vs logikai egységek: pt, dp, sp
A fizikai pixelek (px) különböznek a logikai egységektől (pt, dp, sp) abban, hogy a hardveres felbontáshoz kötődnek és nem skálázhatók. A logikai egységek ezzel szemben elvonatkoztatják a fejlesztőt a konkrét kijelzőtől, lehetővé téve, hogy ugyanaz a 100 pt érték azonos fizikai mérettel jelenjen meg különböző eszközökön.
| Egység | Platform | Függ a PPI-től | Skálázódik | Mire való |
|---|---|---|---|---|
| px | Mind | Igen (fizikai pixel) | Nem | Képek, pufferek, Metal |
| pt | iOS/macOS | Nem (logikai pont) | scale factor | Layout, UIKit, SwiftUI |
| dp | Android | Nem (sűrűségfüggetlen) | density bucket | Layout, elemek méretei |
| sp | Android | Nem (skálafüggetlen) | density + font scale | Szöveg (textSize) |
Átszámítási képletek: iOS esetén — px = pt × scale (ahol scale = 1, 2 vagy 3). Android esetén — px = dp × (dpi / 160). A px közvetlen használata a kódban azt jelenti, hogy a felület eltérően fog kinézni a különböző sűrűségű eszközökön: magas PPI-jű képernyőn az elem túl kicsi, alacsony PPI-n pedig túl nagy lesz.
Miért nem használják a px-et a kódban
A px használata egy mobilalkalmazás forráskódjában — antiminta, amely a felület hibás megjelenítéséhez vezet a különböző pixelsűrűségű eszközökön. A modern keretrendszerek (UIKit, SwiftUI, Jetpack Compose, XML Layouts) tiltják vagy nem ajánlják a méretek pixelben történő megadását.
- iOS UIKit — minden frame, bounds és constraint constants pt-ben van megadva. A pixelek csak a raszterezési szakaszban jelennek meg a UIGraphicsImageRenderer-en keresztül
- SwiftUI — nincs API a méretek px-ben történő beállítására. Minden érték pt-ben van a Font, frame, padding segítségével
- Android XML — ha px-et ad meg a dimens.xml-ben, az Android Studio lint figyelmeztetést jelenít meg: "Use \`sp\` instead of \`px\` for text sizes"
- Jetpack Compose — TextUnit a szöveghez, Dp az elemekhez. A fordító nem engedi a típusok keverését
A px egyetlen legitim használata a kódban — raszterpufferekkel való munka: Bitmap betöltése, Canvas létrehozása képek rendereléséhez, Metal vagy OpenGL használata. Ezekben az esetekben a px a célpuffer fizikai pixelei, és a helyes rendereléshez figyelembe kell venni őket. Minden más esetben logikai egységeket használnak.
Pixelek a képekben és eszközökben
A képek és ikonok pixelekben vannak tárolva, de minden képernyőtípushoz különböző verziókat szállítanak. Az iOS a @1x, @2x, @3x utótagokat használja az Assets.xcassets-ben. Az Android a drawable-mdpi (1×), drawable-hdpi (1.5×), drawable-xhdpi (2×), drawable-xxhdpi (3×), drawable-xxxhdpi (4×) mappákat használja. A rendszer automatikusan kiválasztja a megfelelő fájlt a képernyő sűrűsége alapján.
| iOS scale | Android vödör | Tényező | Példa (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 |
Az eszközök szállításának szabálya: hozza létre a képet vektoros formátumban (PDF, SVG) és exportálja raszter másolatokba a kívánt méretekben. A vektoros eszközök minőségveszteség nélkül skálázhatók és kevesebb helyet foglalnak a tárolóban. Androidon a vektoros erőforrások közvetlenül használhatók a VectorDrawable segítségével, ami kiküszöböli a több raszter másolat szükségességét.
Gyakran Ismételt Kérdések
Mi a különbség a px és a dp között?
px — a képernyő fizikai képpontja. dp (density-independent pixel) — az Android logikai egysége, amely 1 px-nek felel meg egy 160 dpi sűrűségű képernyőn. Különböző sűrűségeknél a dp automatikusan más-más px-számra konvertálódik, megőrizve az elem fizikai méretét.
Miért nem lehet a méreteket px-ben megadni a kódban?
Mert a px nem veszi figyelembe a képernyő sűrűségét. Egy 100 px méretű elem másképp fog kinézni a különböző PPI-jű eszközökön: egy 326 PPI-s képernyőn nagyobb lesz, mint 460 PPI-n. A logikai egységek (dp, pt, sp) automatikusan megoldják ezt a problémát.
Mi az a PPI és hogyan számítják ki?
PPI (pixels per inch) — a kijelző egy hüvelykére jutó pixelek száma. Képlete: PPI = √(w² + h²) / d, ahol w és h — felbontás px-ben, d — átló hüvelykben. Minél magasabb a PPI, annál élesebb a kép. Az Apple Retina kijelzője 300 PPI-től kezdődik.
Mikor indokolt a px használata?
px raszterpufferekkel való munka során indokolt: Bitmap létrehozása, Canvas-ban történő renderelés, Metal/OpenGL shader programozás, kameraképek feldolgozása. Layout-ban és tipográfiában a px nem használatos — pt (iOS), dp és sp (Android) alkalmazandó.
Hogyan lehet megtudni a képernyő felbontását px-ben?
iOS-en: UIScreen.main.nativeBounds px-ben adja vissza a méretet. Androidon: DisplayMetrics.widthPixels és heightPixels a context.resources.displayMetrics-ből. SwiftUI-ben: GeometryReader pt-ben adja vissza a méretet, px-hez meg kell szorozni a displayScale-lel.
Összefoglalás
- px — a kijelző fizikai képpontja, a képernyőfelbontás alapegysége
- Felbontás — a pixelek száma szélességben és magasságban, hardverszinten rögzített
- PPI — pixelsűrűség hüvelykenként, meghatározza a képélességet és a GPU-követelményeket
- Logikai egységek (pt, dp, sp) elvonatkoztatják a px-et és a felületet bármilyen képernyőhöz igazítják
- Antiminta — a px használata layout-ban és tipográfiában; helyes terület — raszterpufferek
- Eszközök különböző felbontásokban kerülnek szállításra (@1x/@2x/@3x iOS esetén, density buckets Android esetén)
- Vektoros formátumok (PDF, SVG, VectorDrawable) előnyösebbek a több raszter másolatnál
Kulcsrakész mobilalkalmazást fejlesztünk
Az IT Sectr 2017 óta készít iOS és Android alkalmazásokat induló vállalkozásoknak és vállalkozásoknak. Tanácsot adunk, és a legjobb megoldást javasoljuk.
Olvassa el is