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.
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).
Secondly add the following code to the head section to make the iphone / ipad behave correctly (no auto scaling)
Finally add the code below to your stylesheet and your done!
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?
Live pixel checker : try itWorks 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% |
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
| 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% |
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 |
If interested you can read more here.
All feedback on this site is more than welcome at ivan@moosewebdesign.com