Tired of hunting

for all those screen dimensions? 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.


We've made an easy-to-use, always up-to-date, information resource, just for you.

New to CSS3 and mediaqueries? Read this quick start guide

Mediaqueries : 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 iphone, ipad,
a small computer screen and a large computer screen.

 

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

 

code ie

 

Secondly add the following code to the head section to make the iphone / ipad behave correctly (no auto scaling)

 

code meta

 

Finally add the code below to your stylesheet and your done!

 

code css

 

Download zipped example here (html file + css file).

 

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.



What? How?

  • 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?
pixel checkLive pixel checker : try it
Works on tablets and smartphones too.
Direct url:
www.websitedimensions.com/pixel

Does your site fit?
Let's check!

Conventions

  • All screen resolution 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 8 & 9, Firefox 3, Safari 5 and Chrome
  • Platforms used: Mac OSX, Windows XP and Windows 7
  • For the horizontal dimension we subtracted 35 pixels
    for the vertical scrollbar, and left browser border.

Two scenarios & two solutions

 

The first thing you should ask yourself is what is the most important dimension for you: the height or the width of the available area in the browser?

 

Scenario one: the height is more important

Reasons could be

  • you want your site to fit the screen without the need to scroll down (no vertical scrollbar)
  • you want to be sure a particular image is visible (or text can be read) without using the scrollbar (but the scrollbar is available)

Scenario two: the width is more important

You want to fit your site nicely within the available width, and you don't care about the height because there's a scrollbar when needed.
For instance: a site with long text paragraphs (and lots of information on one page, like this site)

Scenario one: the height is crucial

The screen resolutions

Based on the current W3C stats. This table can be your guideline for your mediaqueries based on screen heights.

 

screen height smallest screen width in use
worldwide (Jan 2012)
768 px 1024 px (up to 1360 px) 28.4%
800 px 1280 px 14.4%
864 px 1152 px 1.5%
900 px 1440 px 11.7%
1024 px 1280 px 14.8%
1050 px 1680 px 9.2%
1080 px 1920 px 6.2%
1200 px 1920 px 4.5%
Note
You don't need to write mediaqueries for every possible screen resolution. You could for instance target 3 groups here: 768px, 1024px and 1200px.

Usable site space in browsers, based on the screen heights: a visual comparision

 

overview

 

device screen height web site safe area
width height
iphone portrait (480 px) 310 px 352 px
iphone landscape (320 px) 468 px 202 px
ipad portrait (1024 px) 750 px 920 px
ipad landscape (768 px) 1010 px 660 px
screen : 768 px 989 px 548 px
screen : 800 px 1245 px 580 px
screen : 864 px 1117 px 644 px
screen : 900 px 1405 px 680 px
screen : 1024 px 1245 xp 775 px
screen : 1050 px 1645 px 825 px
screen : 1080 px 1885 px 860 px
screen : 1200 px 1885 px 980 px

 

Scenario two: the width is crucial

The screen resolutions

Based on the current W3C stats. This table can be your guideline for your mediaqueries based on screen widths.

 

screen width smallest screen height in use
worldwide (Jan 2012)
1024 px 768 px 14%
1152 px 864 px 1.5%
1280 px 800 px 29.2%
1360 px 768 px 1.3%
1366 px 768 px 10.1%
1440 px 900 px 9.9%
1600 px 900 px 2.5%
1680 px 1050 px 9.2%
1920 px 1080 px 10.7%
Note
You don't need to write mediaqueries for every possible screen resolution. You could for instance target 3 groups here: 1024px, 1440px and 1920px.

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

 

 

device screen width web site safe area
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

 

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.

All feedback on this site is more than welcome at ivan@moosewebdesign.com