Smartphone screen dimensions for Responsive Web Design
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.