5

I'm building a website and I'm really strugling with what width to build the thing at. I've built it at 300px so that it can go on a mobile device comfortably.

However, as I'm planning on having a lot of images/videos, it could do with being larger, lets say at 420px. But the problem is the sheer range of mobile device dimensions that exist today.

I've tested 420 on my Samsung Galaxy S4 and I'm happy with it, because the phone has a Pixel density of 441? However, my mum just got a brand new phone which only has a Pixel density of 294, so the 420px design is way too large for this.

In an ideal world you would think that screens would only get bigger, or at least try to get to a standard size, like what we used to have on desktops, but this obviously isn't the case. So are there any charts out there that can give me some sort of idea of the sizes of modern devices, specifically Mobile.

And I'm not talking about what the box says, i.e. 720 x 1280, I mean exactly what the screen is capable of displaying nicely without having to scale up or down

Unhappy Blogger
  • 151
  • 5

2 Answers2

4

For responsive purposes, you can use the devices resolution conventions:

enter image description here

By using these dimensions, you cover a maximum of devices.

Zistoloen
  • 10,056
  • 6
  • 36
  • 59
1

You will not find a resolution that will fit all or one that works far better than others, you will need to use media queries or agent sniffing to detect which phone is being used.

It is now common to see smartphones using desktop resolutions, especially when the device is in landscape. Many smart phones sold in the last few years are capable of FHD (1080p), Some now support QHD 2K (1440p) e.g Samsung Galaxy 7, and even Sony have released a 4K UHD (2160p).

You shouldn't focus on making your website one site but rather use media queries to support a wide range of devices, if this is a mobile only site, then still you need to have a flexible layout.

Getting familiar with 5 sizes:

  • (XS) Extra Small
  • (S) Small
  • (M) Medium
  • (L) Large
  • (XL) Extra Large

Bootstrap determines these sizes as:

SOURCE

// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Zurb Foundation determines these sizes as:

SOURCE

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

Both Zurb and Bootstrap frameworks are used by millions of sites worldwide, these resolutions are tested, and work very well. You shouldn't need to do research, as the people behind these have done that for you. Make your site future proof, cater using media queries.

Simon Hayter
  • 33,097
  • 7
  • 60
  • 119