Realistic Mobile Screen Resolutions - css

Question

Is there a Matrix anywhere to get realistic screen availability for the most common phones which take into account the screen resolution available with toolbars visible?
We need to develop a scrolling site for mobile/tablet and although we are trying to make the css as fluid as possible the brief relies on background imagery which means we need a variety of media queries to switch the images for the best experience - a realistic resolution guide would be really helpful.
Cheers

Answer 1

In Google Chrome, open developer tools by pressing F12, and click on the gear icon to go to Settings -> Overrides, turn on 'User Agent', and select your desired device - with 'Device Matrix' you can customize screen size and more.

Answer 2

Check out http://screensiz.es/phone .
You can order phones or tablets by screen size, aspect ratio and popularity.
Also check out screencast in chrome canary dev tools.
http://www.html5rocks.com/en/tutorials/developertools/mobile/
What I am still looking for is something like google's browsersize but for mobile screen.
Update:
Google Labs Browser Size is now part of Google Analytics
For up to date datas check https://design.google.com/devices/ (AKA now as https://material.io/tools/devices/)

Answer 3

#media (min-width: 1200px) {
#media (max-width: 980px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
#media (min-width: 768px) and (max-width: 979px){
#media (max-width: 768px) {
#media (max-width: 767px) {
#media (max-width: 480px) {
Should be the standards

Answer 4

I think you should definitely try this website : http://responsivetools.com/
It will give you a quick idea of how you site looks like for different mobile and tablet resolution.

Answer 5

There are many online services where you can view you site "through" a phone's display, with the resolutions specified.
For example: mobilephoneemulator

Answer 6

Statcounter probably provides the best number crunching on screen sizes and many other stats. Their page always gives me loading problems, so I prefer to find someone that has quoted their stats, than going directly to the source, like this blogger:
http://www.satya-weblog.com/2013/07/desktop-laptop-mobile-screen-resolution-most-common-worldwide.html
Hope that is a more direct answer to your question!

Answer 7

We'll you might want to try going here: http://cartoonized.net/cellphone-screen-resolution.php it basically gives you the best resolution depending on types of phones.

Answer 8

This is a list for all known CSS #media property for mobile devices + several desktop resolution that can be used.
These include Android, iPhone, iPad, Google Nexus, LG, Samsung, Nokia, HTC, Motorola, Sony and all the famous brands.
Look on GitHub
#media all and (max-width: 2560px){
}
#media all and (max-width: 1920px){
}
#media all and (max-width: 1440px){
}
#media all and (max-width: 1280px){
}
#media all and (max-width: 1200px){
}
#media all and (max-width: 1024px){
}
#media all and (max-width: 992px){
}
#media all and (max-width: 768px){
}
#media all and (max-width: 720px){
}
#media all and (max-width: 600px){
}
#media all and (max-width: 540px){
}
#media all and (max-width: 480px){
}
#media all and (max-width: 424px){
}
#media all and (max-width: 414px){
}
#media all and (max-width: 400px){
}
#media all and (max-width: 384px){
}
#media all and (max-width: 375px){
}
#media all and (max-width: 360px){
}
#media all and (max-width: 320px){
}