Cinema HD Display (2560×1600)
iMac 27″ (2560×1440)
MacBook Pro 17″, LED Cinema Display (1920×1200)
iMac 21.5″ (1920×1080)
MacBook Pro 15″—high resolution display(1680×1050)
MacBook Pro 15″—standard resolution display (1440×900)
MacBook, MacBook Air, MacBook Pro 13″ (1280×800)
iPad (1024×768)1
iPhone 4(960×640)1, 2
iPhone 3GS, iPod Touch (480×320)1
iPod Nano (376×240)
iPod Classic (320×240)
I built this page because I am in the process of trying to decide which Mac to buy next to supplement my aging MacBook. And because I'm a geek who loves trivial and diagrams, I had to map out not just the devices that are on my list, but get all of the iPods, iPad, iPhones, MacBooks, iMacs and external display in there as well. I'm also using the page to play with some CSS design.
I have posted this page in the hopes that it will be informative to someone trying to visual the relative size in pixels across the many displays available on Apple products. I don't take into account physical size here (maybe I'll add that as a second chart later… )
The chart covers current Apple products with displays available as of July 5, 2010.
This page uses plain old HTML and CSS (and a touch of Javascript; if anyone knows of a way to handle the proportional scaling of the height of the diagram relative to the width in pure CSS, drop me a line). This page was tested in Safari 4, Chrome 5, Firefox 3.6 and Internet Explorer 8 and worked reasonably well. If you’ve got some other browser and it looks like crap, sorry about that.
If you have a browser that groks CSS @font-face direcetives, the typeface you’re looking at is Graublau Sans Web from FDI fonts, packaged by for use by the excellent Font Squirrel @font-face Generator.
Landscape orientation.
The iPhone 4 Retina display is the same physical size as previous generation iPhone devices; the ppi of the display has been doubled.