Screen Density
ELI5 - The Vibe Check
Screen density is why you need to export your app icon in like six different sizes. A pixel on a cheap phone screen and a pixel on a high-end phone screen are physically different sizes, so the OS scales everything by a density factor to keep a button looking the same physical size no matter which device you're holding. Ignore it and your crisp icon looks blurry on high-density screens, or your image assets balloon your app size on low-density ones.
Real Talk
Screen density describes the ratio of physical pixels to logical, density-independent pixels on a device display, expressed as buckets like @1x/@2x/@3x on iOS or mdpi/hdpi/xhdpi/xxhdpi on Android. Apps ship multiple resolutions of raster assets so the OS can select the appropriate one for the device's density, keeping UI elements a consistent physical size across wildly different screen resolutions.
When You'll Hear This
"We forgot the @3x asset and the icon looked slightly soft on newer iPhones." / "Vector assets sidestep the whole screen density problem since they scale cleanly at any resolution."
Related Terms
Aspect Ratio
The aspect-ratio property tells an element to keep its proportions, like a photo that stays rectangular no matter how you resize it.
Device Fragmentation
Device fragmentation is the classic Android headache: thousands of different phone models, screen sizes, chipsets, and OS versions, all needing your app to...
Responsive vs Adaptive
Responsive design flows like water — it adjusts smoothly to any screen size. Adaptive design has fixed breakpoints — it snaps between pre-designed layouts.
Safe Area
Safe Area is the part of the screen that isn't hiding behind a notch, a Dynamic Island, a home indicator bar, or a curved corner.