: Comprehensive guide for Mobile Display / Resolution 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

@Speyer207

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.

Vote Up Vote Down

@BetL925

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



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

Vote Up Vote Down