Smartphone screen dimensions for Responsive Web Design
A list of screen dimensions of popular mobile devices, to aid in the development of responsive websites.
When developing Responsive websites, code needs to be written in such a way that design elements work well on desktop and mobile devices with a wide range of viewports.
A good workflow involves testing any website in the five major browsers (Internet Explorer, Firefox, Chrome, Opera and Safari), but testing for a litany of mobile devices is more challenging. Whilst I use the Responsive Design View included in Firefox (Ctrl + Shift + M), one of my challenges has been in accurately emulating the dimensions of specific mobile devices.
To remedy this, I have created this list of pixel dimensions for a number of popular mobile devices. With these figures in hand, one can set the dimensions of any particular device into Firefox’s Responsive Design View to see how a website would display for users of that device.
These dimensions can then be saved as ‘presets’, available for quick use in the future.
- BlackBerry Z10: 1280×768 pixels
- Apple iPhone 3S: 480×320 pixels
- Apple iPhone 4: 960×640 pixels
- Apple iPhone 4S: 960×640 pixels
- Apple iPhone 5: 1136×640 pixels
- Asus Nexus 4: 1280×768 pixels
- Asus Nexus 7 (2012): 1280×800 pixels
- Asus Nexus 7 (2013): 1920×1200 pixels
- HTC Desire HD: 480×800 pixels
- HTC One: 1920×1018 pixels
- HTC One X/XL: 720×1280 pixels
- Huawei Ascend: 1280×720 pixels
- LG Nexus 4: 768×1280 pixels
- LG Optimus G Pro: 1920×1080 pixels
- Microsoft Surface: 1366×768 pixels
- Microsoft Surface Pro: 1920×1080 pixels
- Samsung Galaxy S2: 480×800 pixels
- Samsung Galaxy S3: 720×1280 pixels
- Samsung Galaxy S4: 1920×1080 pixels
- Samsung Galaxy Note II: 1280×720 pixels
- Samsung Galaxy Note 10.1: 1280×800 pixels
- Sony Xperia Z: 1920×1080 pixels
Don’t forget that whilst Firefox’s Responsive Design View is good, it doesn’t substitute for testing in other browsers and emulators or indeed, actual devices.
Comments
2 responses to “Smartphone screen dimensions for Responsive Web Design”
Thanks for the list. Would it also pay to list the DPI for each device? Some of the resolutions are similar enough to normal desktop resolutions that it will cause the layout to “squeeze up”.
By adding in DPI, developers can get a better idea of the physical size of the device.
Great list, thank you.