u/Snookerman:

I’m working on re-designing a site so it will look good on smartphones. I’m a bit puzzled about the retina display of the iPhone. As I understand it, even though retina display iPhones have twice the resolution (not sure this is the right word in this situation) as their predecessors, they still report the same screen size, 480x320. That means I don’t need two media queries for iPhones.

My question is though, how will the site look on a retina display compared to a non retina display? Will I have twice as much space or not? If I don’t, what exactly will having a retina display do? Will it just make vector stuff, like the fonts, look better? Will images just look the same?

I googled around a bit and found some stuff about there being a difference between points and pixels but I haven’t found any good explanation about this. I would appreciate it if someone could explain this to me or at least point me in the right direction. Thank you!

I wouldn’t recommend going retina-resolution for a website. The resolution has quadrupled but mobile bandwidth is still the same. While on mobile people want quick answers.

As spoonmonkey mentioned, it is a 960x720 screen that acts like a 480x 360 screen. You can serve high-res media specifically for the device through media queries.

Still there’s one thing you can do: for vector like artwork you can use svg instead of bitmap. It will look very sharp on a retina display without having to change anything. But this won’t work on older versions of android (sigh).

View thread on r/web_design