How to determine the overall dimensions of viewports (not screen sizes) of common devices for responsive web design?

Question

Search to find or create a chart representing the size range of the web page of a mobile device / tablet:

viewport sizes, therefore, the available size in the browser window is both height and width, because in fact there is a range of relationships in landscape and portrait modes

The goal is to identify logical breakpoints that make sense on different devices, not just the exact sizes of Apple products ...

(If you are not familiar with responsive web design, here is the article that started it all) http://www.alistapart.com/articles/responsive-web-design

Answer 1

Here is a fairly long list of viewport sizes for mobile devices and tablets. 533 seems to be a cut-off for a tablet on a mobile. http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/

Answer 2

I studied websites that use responsive web projects at http://mediaqueri.es/ .

There seems to be no final numbers. I guess the reason is that it depends a lot on how the page looks on different devices.

EDIT: The Twitter Bootstrap documentation has a guide for viewport sizes, see http://twitter.github.com/bootstrap/scaffolding.html#responsive

Answer 3

For me, the most comprehensive resource available is http://viewportsizes.com/

It is easy to use and you can download the full document in .csv or .json