Developing websites for today’s mobile devices is a fairly complex process. As integrators, we no longer stick to the “standard screen size” of 1050px wide (or 800px, or 1440px). Instead, we have to build responsive sites for both desktop and mobile devices. Stranger still, we now have to contend with pixel densities specific to every device devices.
Though the actual pixel densities may be irrelevant, what is important is the web-browser resolution and it’s not always as obvious as the number of stated screen pixels.
On the Nexus 7, it became aparent the size of the screen is not the 1280×800 advertised. Instead, the resolution is actually 600×961.
Going forward, it’s best to build websites using popular CSS frameworks such as Bootstrap. However, it may never be so easy as it once was. It will still be necessary to fine-tune the website’s rendering for popular device resolutions.
Below is a list of devices and their actual, browser resolutions:
| Device | Portrait | Landscape |
|---|---|---|
| iPhone 4/4S | 320×416 | 480×268 |
| iPhone 5 | 320×504 | 568×268 |
| Nexus 3 | 360×519 | 598×287 |
| Nexus 7 | 600×792 | 960×441 |
