How to Make Your Website Images Look Great on iPhone 4’s High-DPI Screen
I picked up an iPhone 4. How?
I woke up at 3 AM the morning Apple started taking reservations. That day their store was having troubles taking orders. I kept checking almost every hour until I finally got a reserved phone at 10 AM.
On the June 24th, a friend and I got to the mall with the Apple Store at 6:45. The parking lot was empty, except for maybe 6 cars. I thought, great, Michigan’s economy might actually pay off this time. When we opened the doors, I was wrong. Apparently the hundreds to thousands of people parked in the back.
I waited in line for 4 hours and 15 minutes before I finally had my phone in my hand. I will NEVER DO THAT AGAIN.
Send it to my house next time.
The first thing you notice about the phone is that screen. That unbelievable screen. Oh yeah, and how it makes just about every image on the web look like shit. Well, if you are a website owner, there are some things you can do to make your website look better. Text is fine already. But you have to swap out your images for higher resolution counterparts.
The technique is only supported in the newest browsers. But so what? Who will be running IE 6 on an Android (You can be sure that Android handset makers will follow) or an iPhone?
From the solution I posted at Flowz:
The trick here is that we check to see if the font size for our special class is set to value declared in our high-DPI CSS file. (Our flag) It will only be set if the browser passed the media query. If the flag is set, grab every element in the DOM with the replace-2x class and change the src attribute to point to our high-res counterparts.