If you’re writing a new responsive website which seems to be the way to go for a single maintained site that is accessable via mobiles, tablets and phones then here’s some key screen resolutions to be targeting:
| Description/Name | Resolution | Extra Info & Estimated Date |
|---|---|---|
| QVGA | 320×240 | Typically non-smart phones (and Smartphones c.2005) |
| HVGA | 480×320 | Typically older smartphones (c.2008) |
| VGA | 640×480 | Typically older smartphones (c.2008) |
| WVGA | 800×480 | Low-End Smartphones (c.2010 onwards) |
| SVGA | 800×600 | Low-End Computers (c.2000) and mid-range tablets |
| XGA | 1024×768 | Mid Range Computers (c.2005) |
| SXGA | 1280×1024 | Current Computer Screen (c.2010 onwards) |
| 720p HD | 1280×720 | HD TVs, High-End Smart-Phones/Tablets |
| WXGA | 1280×800 | Laptops, Computers and High-End Smartphones/Tablets |
| WXGA+ | 1440×900 | Typically Laptops and Computers |
| Key/Odd Resolutions: | ||
| ipad & 2 | 768×1024 | Portrait XGA |
| iPad 3 | 1536×2048 | XGA |
| Kindle Fire | 600×1024 | |
| iPhone 1, 2, 3 & 3G | 320×480 | Portrait HVGA |
| iPhone 4, 4S | 640×960 | Portrait DVGA |
| iPhone 5 | 640×1136 | |
| HTC Sensation | 540×690 | |
This is just a small list of resolutions that’s in use out int he wild so to speak. The varying resolutions does make it slightly harder to get a consistant experience throughout but as long as your site looks good in the first list then you will have hit the majority of devices (as long as you remember to test portrait and landscape!).
As you can also see, Apple has recently decided to use strange resolutions in their devices where as most newer smart phones are 800×1280.
If you’re creating a responsive layout then there’s lots of resources out there to create a fluid grid to reflow the content when the screen size changes. I personally recommend Zurb’s Foundation but the latest version doesn’t support IE7; although IE7 usage is shrinking.