Tired of hunting

for all those screen dimensions and resolutions? Then you've come to the right place.


With the help of CSS3 and mediaqueries you can change the layout of your website based on the detected screen size of the device (be it a computer screen, tablet, smartphone,...). But what are the current guidelines in pixels? Find out here.


New to CSS3 and mediaqueries? Read this quick start guide

Responsive web design : quick start guide

 

Requires a basic understanding of css. You can download a working example here (html file + css file).

 

Suppose you want to create a web site that has a div with id 'mydiv' and you'd like to change the background color and font size for

  • smartphones
  • tablets
  • small computer screens
  • large computer screens

First enter this code in the head section of your page (to make mediaqueries work on older Internet Explorer browsers).

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

 

Secondly add the following code to the head section to make the smartphones and tablets behave correctly (no auto scaling)

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

 

Finally add the code (the so called 'media queries' ) below to your stylesheet and your done!

/* -------- default ----------- */ #mydiv { font-size: 12px; background-color: #9F0; } /* --------- smartphone ----------- */ @media screen and (max-width: 767px) { #mydiv { font-size: 14px; background-color: #636; } } /* -------- tablets----------- */ @media screen and (min-width: 768px) { #mydiv { font-size: 16px; background-color: #FF0; } } /* --------- small desktop screen ------------- */ @media screen and (min-width: 1024px) { #mydiv { font-size: 14px; background-color: #090; } } /* --------- large desktop screen ------------- */ @media screen and (min-width: 1280px) { #mydiv { font-size: 16px; background-color: #060; } }

 

Note: these 'breakpoints' (min-width) can differ from site to site. See my breakdown of some well known sites below.

 

For more in depth information about media queries and responsive web design I highly recommend a small, excellent and easy to read book
written by the genius Ethan Marcotte. You can buy the ebook version here for only 9 USD.



Devices & resolutions

  • What browsers do people use?
  • On what kind of devices?
  • What is their screen resolution?
  • How much space is taken by the browser toolbars?
  • What does it mean for me as a web site developer?

Conventions

  • All information is based on the latest W3C stats
  • Usable site space is measured with standard toolbar,
    Google toolbar and the favorites toolbar visible.
  • The browsers used to find the minimum safe area are Internet Explorer 10, Firefox, Safari and Chrome
  • Platforms: Mac OSX & Windows
  • For the horizontal dimension we subtracted 35 px for the vertical scrollbar, and left browser border.
pixel checkLive pixel checker : try it
Works on tablets and smartphones too.
Direct url: www.websitedimensions.com/pixel
Does your site fit?

The mediaqueries workflow


We will set several so called 'breakpoints' in our CSS file, where we describe how the webpage must look.
These breakpoints target the screen resolution, and more specifically the width.


So in other words we could instruct our web site to act as follows:

  • If you detect the end user's screen is smaller than 480 pixels you have to show the smartphone layout
  • If the screen is larger than 480 pixels but smaller than 1024 pixels, show us the tablet layout
  • If the screen is larger than 1024 show the regular desktop layout
Why target the width, not the height ?
  • We want our site to fit in the browser window without horizontal scrollbars
  • The height is relative (we are used to scrolling these days)
  • Vertical scrolling feels natural, horizontal scrolling does not
Can we ignore the height?


That depends on the content of your website. Very important information should be 'above the fold' which means: visible without scrolling. So it's always good to know the available height on the most used devices, to avoid cutting of banners in the middle or putting that very important call-to-action button out of sight.


Why not target the device?


I'm not saying you never should. Maybe in some particular cases you'd want to target a Samsung Galaxy or an iPhone 5.


You should keep your media queries as simple as possible.

 

Everyday new devices are lauched and if you have dozen or more websites with very complex, device specific media queries you'll have a hell of a job to keep everything up to date.

What can I change ?


Simply put: every CSS rule. You can make a 'normal webpage' look like a native app on smartphones if you'd wish.

  • Change font, colors, spacing,
  • Change images
  • Show / hide elements
  • Change column widths, layouts, ...
  • The look of elements like buttons, form fields...
  • ... and so much more

 

Overview of the current desktop screen resolutions in use (worldwide)

This table can be your guideline for your mediaqueries.

 

Screen width Smallest screen height In use worldwide
Source: W3C, Jan 2016
1024 px 768 px 3%
1280 px 800 px 11%
1360 px 768 px 2%
1366 px 768 px 35%
1440 px 900 px 6%
1600 px 900 px 6%
1680 px 1050 px 3%
1920 px 1080 px 20%
2560 px and up 1440 px 1%
CSS Breakpoints:
where & how much?

You don't need to write mediaqueries for every possible screen resolution. To keep things simple you could target three groups:

  • smaller than 768 px
  • smaller than 1024 px
  • larger than 1024 px

Not all web sites use the same breakpoints.
Needless to say they all have their reasons.
Microsoft for instance will not use the iphone
and ipod breakpoints, for understandable reasons.

How about smartphone and tablet screen resolutions worldwide?

Why W3C does not give exact numbers, and other online statistics are confusing.


I decided to study the Google Analytics for three website I made in different areas.
All three sites get about 1000 to 2000 visitors a day, so these results are quite accurate.

 

What I presumed became immediately visible: it all depends on the audience. There are no exact average numbers, as they are misleading.

 

A good practice would be to start with three breakpoints : smaller than tablet (max 768), tablet (min 768 max 1024) and desktop (min 1024).

You'll go a long way with this simple approach.


Screen width Percentage of visitors (on total) Source : Google Analytics.
  www.driesvannoten.com
Fashion Designer, Belgium
www.harbeth.co.uk
Loudspeakers, UK
websitedimensions.com
320 px 0.7 % 4.8 % 1.1 %
360 px 4.25 % 5.6 % 1.6 %
480 px 0 % 0 % 0.1 %
375 px 1.25 % 4.8 % 1 %
768 px 13.0 % 15.2 % 1.36


Usable site space in browsers, based on the screen widths.

 

 

Device screen width Web site safe area
= screen resolution minus browser interface and vertical scrollbar.
width height
iphone portrait (320 px) 310 px 352 px
iphone landscape (480 px) 468 px 202 px
ipad portrait (768 px) 750 px 920 px
ipad landscape (1024 px) 1010 px 660 px
screen : 1024 px 989 px 548 px
screen : 1152 px 1117 px 644 px
screen : 1280 px 1245 px 580 px
screen : 1360 px 1325 px 548 px
screen : 1366 px 1331 px 548 px
screen : 1440 px 1405 px 680 px
screen : 1600 px 1565 px 680 px
screen: 1680 px 1645 px 825 px
screen : 1920 px 1885 px 855 px
screen : 2560 px 2525 px 1220 px

Commonly used breakpoints?

CSS breakdown of some major websites.


Here is an overview of six well known websites. As you can see: all work with media queries, but they all have their own preferences.


Note: these are the major breakpoints, that is: where the look of the site drastically changes.

Some of these sites have more, less important breakpoints.

Website CSS breakpoints in pixels
  320 480 540 600 640 700 736 768 898 992 960 1008 1024 1068 1280 1440 1700 2100 #
bbc.com                             4
cnn.com                           5
apple.com                           5
mercedez-benz.com                                 2
microsoft.com                               3
adele.com                                 2



It is scant comfort to know that you're not alone in this mess. Film editors and graphic designers for television have been struggling with the 'title safe area' for decades. If interested you can read more here.
Did you find this useful?


If so, please do me a small favor. Visit my company website www.moosewebdesign.com and share it on FB.
It only takes one minute and would make a huge difference to me. Thank you!


All feedback on this site is more than welcome at [email protected]