A collection of CSS media queries and some test files.
TL;DR: The file six-breakpoints-revised.htm contains the final media query definitions.
See the demo files in action using rawgit.com:
- https://rawgit.com/votum/media-queries/master/four-breakpoints-revised.htm
- https://rawgit.com/votum/media-queries/master/six-breakpoints-revised.htm
The goal was to find (initially four) CSS media queries that would work across different mobile devices sizes, OS and browsers. We needed two types of media queries for each breakpoint: One that is active for a single brekapoint only and one that is active from the smallest screen size to the given breakpoint so that CSS property inheritance could be used across multiple breakpoints.
Before implementing a single line of CSS, Votum as well as Universal Music Germany each had done an analysis of multiple browser statistics from different websites to gather lists of typical screen sizes and resolutions and group the respective devices into "design breakpoints". We will not publish the internal raw data at this point. But you can find an overview poster generated by Votum from public data sources in this repository – the responsive screensize guide.
We went through some tedious testing on multiple devices. For that purpose I created some simple test files. Three of them are included in this repository. The four-breakpoint-* files are the ones that were the base for the code that is currently in production at m.universal-music.de. The idea to use only four breakpints is based on the Twitter Bootstrap which we used as a base for out development. During testing it got clear that four breakpoints may be not enough to target such different devices as an iMac 24" and an HTC Desire with 4.3" screen. Starting again from our statistical data I defined the final six breakpints that roughly matches the poster mentioned above.
| Name | OS | Resolution | Display | Browser |
|---|---|---|---|---|
| Samsung Ativ S | Windows Phone 8 | 1280 x 720 | 4,8" | Internet Explorer 10 |
| Nokia Lumia 625 | Windows Phone 8 | 800 x 480 | 4,7" | Internet Explorer 10 |
| Surface 1 | Windows 8.1 RT | 1366 x 768 | 10,6" | Internet Explorer 11 |
| Surface 2 | Windows 8 RT | 1920 x 1080 | 10,6" | Internet Explorer ? |
| iPod | Apple OS 7.0.3 | 1136 x 640 | 4" | Safari |
| iPad 2 | Apple OS 7.0.3 | 1024 x 768 | 9,7" | Safari, Chrome, Mercury, MiHTool |
| iPad 3 | Apple OS 6.1.3 | 2048 x 1536 | 9,7" | Safari |
| IPad 4 Retina | Apple OS 7.0.3 | 2048 x 1536 | 9,7" | Safari, Chrome, Mercury, Opera Min |
| Samsung Galaxy Tab 2 | Android 4.1.2 | 1024 x 600 | 7" | Android Native |
| Samsung Galaxy Tab 8.9 | Android 3.2 | 1280 x 800 | 8,9" | Android Native, Firefox, Opera Mobile |
| HTC Desire 500 | Android 4.1.2 | 800 x 480 | 4,3" | Android Native, Chrome, Firefox, Opera Mini |
| Samsung Galaxy Tab 3 | Android 4.2.2 | 1280 x 800 | 10,1" | Android Native, Chrome |
- Stephan Werk and Dietrich Löbner from Universal Music Germany for providing a lot of browser and device statistics data as well as implementing the initial versions of the media queries.
- Markus Schulz for generating the screensize guide.
- Thomas Heuer for putting this all together, testing it and rewriting the media queries over and over.