Wait, my Samsung Galaxy S4 is not 1080x1920?
“Retina” or HD phones promote “desktop” screen sizes and yet when you look at websites on those phones the visual space is still around 320px minimum (360x640 for the S4). “Desktop” screen sizes aren’t simple to account for either because the size is not actually your viewport size. With all of the caveats and terms out there it can be easy to lose yourself in what sizes to design and account for. That’s why it isn’t surprising that lately, I’ve been hearing confusion from clients and developers about this. Hopefully I can help clear this up a bit and give some advice to simplify things.
Screen vs. Window Viewport vs. Client Sizes
First, let’s take a look at “desktop” screens to get into the caveats of terms and sizes. If we follow most common screen sizes you might have a higher chance of viewing this post on a screen size of 1366x768px which is really common in laptops, hence quotes around “desktop”. Does that mean your website will show at that exact same resolution? Yes, but only if you are truly in a full windowless screen that doesn’t show scrollbars. However, for most users, the answer is no.
Many web browsers over the years have tried to cut down as much outer border and toolbar heights as possible. However, don’t forget that if you are in a window those add their own borders and that varies between operating systems. So now out of that 1366px of width you’ve maybe lost ~16px of space due to the way your OS styles windows. What confuses some people is that some resizing extensions for development include that into their calculations, so if you’re trying to test for a 1280px screen the resulting width would actually be ~1266. However, your users might be full screen so they would have 1280px and not 1266.
Screen = 1280
Application <= 1280
Window <≈ 1266
Content <≈ 1248
Well not quite.
Do note with screen docking and various window sizes your users could be seeing those smaller screens with scrollbars. Also, the phone sizes are getting larger with “phablets”. So we are back at the confusion of users, clients, and developers on why their 320px docked screen has different content space or breaking issues but not in their phones.
This brings me to the advice part.