CSS for iPhone 4 (Retina display)

June 23rd, 2010 in with 31 Comments
Regarding the topic:

Since the iPhone 4 got intro­du­ced espe­cially inter­face desi­gners were won­de­ring: What will change desi­gning for a dis­play with twice the pixel ratio?

So if you feel like you need to make some adjust­ments to your CSS just for HiRes dis­plays, this is how you do it.

Tar­get with spe­ci­fic CSS:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

The rea­son is, that because every pixel is half the visual size, you may have to dou­ble the values of some CSS pro­per­ties. Espe­cially for images shown on a Retina dis­play this comes in handy. You will be able to see the full qua­lity of up to a 960 pixels wide image on those devices.

How do I tar­get the iPad? Read here.

Project 365 Day 175: Worth Queueing For

Two other inte­res­ting arti­cles about the Retina dis­play: What does 320dpi mean to desi­gners? by Tim Van Damme and How to make your web con­tent look stun­ning on the iPhone 4’s new Retina dis­play by Aral Balkan.

Responses are currently closed, but you can trackback from your own site.

31 Comments and Trackbacks

CSS for iPhone 4 (Retina display) « Thomas Maier – web … | My Blog says:
June 23, 2010 at 11:38 PM

[…] here to read the rest: CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web … This entry was pos­ted on Wed­nes­day, June 23rd, 2010 at 6:35 pm and is filed under Uncategorized. […]

CSS for iPhone 4 (Retina display) « Thomas Maier – web … | CSS Guru How to CSS says:
June 24, 2010 at 12:35 AM

[…] more: CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web … Share and […]

CSS for iPhone 4 (Retina display) « Thomas Maier – web & communication designer « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit says:
June 24, 2010 at 1:25 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designerthomasmaier.me […]

CSS for iPhone 4 (Retina display) « Thomas Maier – web … : : css says:
June 24, 2010 at 2:38 AM

[…] Zobacz res­ztę arty­kułu: CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web … […]

=== popurls.com === popular today says:
June 24, 2010 at 4:00 AM

=== popurls.com === popu­lar today…

yeah! this story has ente­red the popu­lar today sec­tion on popurls.com…

CSS for iPhone 4 (Retina display) « Thomas Maier – web & communication designer : Popular Links : eConsultant says:
June 24, 2010 at 4:32 AM

[…] here: CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion desi­gner 23 June 2010 | Unca­te­go­ri­zed | Track­back | del.icio.us | Stum­ble it! | View Count : 0 Next Post […]

The Garmin Nuvi 780 | Product Guide Reviews says:
June 24, 2010 at 9:24 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web … […]

Jstn Ryan's Webpage says:
June 24, 2010 at 1:15 PM

[…] This post, and the rela­ted CSS code to tar­get the iPhone 4’s brow­ser, came through my Twit­ter stream mul­ti­ple times today. Tho­mas Maier wri­tes about tar­ge­ting the Mobile Safari brow­ser with CSS media que­ries on his blog. […]

Twitted by anthonyherron says:
June 25, 2010 at 12:31 AM

[…] This post was Twit­ted by anthonyherron […]

Reasons to Buy the IPhone 4 | Metacafe says:
June 25, 2010 at 2:52 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web … […]

links for 2010-06-24 « Daniel Harrison's Personal Blog says:
June 25, 2010 at 4:02 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion desi­gner (tags: css iphone) […]

Ingredient in red wine may prevent some blinding diseases – World Best News says:
June 25, 2010 at 9:00 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web … […]

Medical Billing Software says:
June 25, 2010 at 9:53 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web … […]

Primo Viaggio Infant Car Seat in Paloma | primo viaggio car seats says:
June 25, 2010 at 8:55 PM

[…] CSS f&#959r iPhone 4 (Retina &#1281&#1110&#1109&#1088&#406&#1072&#1091) « Tho­mas Maier –… […]

Peg Perego Primo Viaggio SIP Car Seat | primo viaggio car seats says:
June 25, 2010 at 8:57 PM

[…] CSS f&#959r iPhone 4 (Retina &#1281&#1110&#1109&#1088&#406&#1072&#1091) « Tho­mas Maier –… […]

davidvoegtle.net » Blog Archive » Daily links 06/26/2010 says:
June 26, 2010 at 2:38 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designer […]

Artistic talents on display at Contra Costa Fair | Custom oil painting says:
June 27, 2010 at 9:10 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designer […]

Education digest: Art display available until July 15 | Custom oil painting says:
June 27, 2010 at 3:08 PM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designer […]

BP Travel Award Winner 2009: Isobel Peachey | Custom oil painting says:
June 27, 2010 at 5:17 PM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designer […]

Weekly Digest for June 27th — Hello. My name is Václav Vančura. says:
June 27, 2010 at 7:28 PM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designer […]

Jumping Anaconda » Blog Archive » Police Deny Hotly Pursuing Van in Fatal Harlem Crash says:
June 30, 2010 at 7:51 AM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designer […]

Jumping Anaconda » Blog Archive » Pakistan Is Said to Pursue an Afghan Foothold says:
June 30, 2010 at 12:21 PM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designer […]

Jumping Anaconda » Blog Archive » Movie Review | ‘South of the Border’: Oliver Stone, Tour Guide says:
June 30, 2010 at 12:48 PM

[…] CSS for iPhone 4 (Retina dis­play) « Tho­mas Maier – web & com­mu­ni­ca­tion designer […]

Diseño web adaptable o Responsive Web Design | Adinteractive says:
September 14, 2011 at 4:24 AM

[…] detec­tar si es un iPhone 4 (por Tho­mas Maier): […]

CSS for iPhone 4 (Retina display) | The Sacred & The Profane » Web Design says:
October 2, 2011 at 8:15 PM

[…] CSS for iPhone 4 (Retina dis­play) | The Sacred & The Profane […]

Nasendackel - monkeys can write - iOS5 und position:fixed says:
October 17, 2011 at 5:06 PM

[…] nicht mehr so gut aus­sieht. Ich möchte aber auch ungern auf ne Brow­ser­wei­che set­zen… Update: Lösung gefun­den 17.10.2011 | 2 Kom­men­tare 16.10.2011 | 0 Kom­men­tare 14.10.2011 | 3 […]

Modern web design – 2 - Colorblind Programming says:
December 10, 2011 at 12:12 AM

[…] indi­ca­ting pro­blems in fin­ding or iden­ti­fy­ing the links on a page. Here are two exam­ples here and here. By loo­king at the arti­cle, would you tell that that it con­tains a link? I don’t think so. […]