Realistic Mobile Screen Resolutions

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.