[{"data":1,"prerenderedAt":72},["ShallowReactive",2],{"term-s\u002Fscreen-density":3,"related-s\u002Fscreen-density":59},{"id":4,"title":5,"acronym":6,"body":7,"category":40,"description":41,"difficulty":42,"extension":43,"letter":44,"meta":45,"navigation":46,"path":47,"related":48,"seo":53,"sitemap":54,"stem":57,"subcategory":6,"__hash__":58},"terms\u002Fterms\u002Fs\u002Fscreen-density.md","Screen Density",null,{"type":8,"value":9,"toc":33},"minimark",[10,15,19,23,26,30],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"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.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Screen density describes the ratio of physical pixels to logical, density-independent pixels on a device display, expressed as buckets like @1x\u002F@2x\u002F@3x on iOS or mdpi\u002Fhdpi\u002Fxhdpi\u002Fxxhdpi 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.",[11,27,29],{"id":28},"when-youll-hear-this","When You'll Hear This",[16,31,32],{},"\"We forgot the @3x asset and the icon looked slightly soft on newer iPhones.\" \u002F \"Vector assets sidestep the whole screen density problem since they scale cleanly at any resolution.\"",{"title":34,"searchDepth":35,"depth":35,"links":36},"",2,[37,38,39],{"id":13,"depth":35,"text":14},{"id":21,"depth":35,"text":22},{"id":28,"depth":35,"text":29},"frontend","Screen density is why you need to export your app icon in like six different sizes.","beginner","md","s",{},true,"\u002Fterms\u002Fs\u002Fscreen-density",[49,50,51,52],"Device Fragmentation","Responsive vs Adaptive","Aspect Ratio","Safe Area",{"title":5,"description":41},{"changefreq":55,"priority":56},"weekly",0.7,"terms\u002Fs\u002Fscreen-density","-9rET4ZGAYdCnf7gMdBehM1vD-Lolu1cxaXqi4sHXtQ",[60,63,66,69],{"title":51,"path":61,"acronym":6,"category":40,"difficulty":42,"description":62},"\u002Fterms\u002Fa\u002Faspect-ratio","The aspect-ratio property tells an element to keep its proportions, like a photo that stays rectangular no matter how you resize it.",{"title":49,"path":64,"acronym":6,"category":40,"difficulty":42,"description":65},"\u002Fterms\u002Fd\u002Fdevice-fragmentation","Device fragmentation is the classic Android headache: thousands of different phone models, screen sizes, chipsets, and OS versions, all needing your app to...",{"title":50,"path":67,"acronym":6,"category":40,"difficulty":42,"description":68},"\u002Fterms\u002Fr\u002Fresponsive-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.",{"title":52,"path":70,"acronym":6,"category":40,"difficulty":42,"description":71},"\u002Fterms\u002Fs\u002Fsafe-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.",1792528121948]