How to figure out common viewport dimensions (not screen sizes) of common devices for adaptive web design?
Looking to find or create a chart presenting a range of mobile/tablet device webpage sizes:
The goal is to identify logical breakpoints that make sense across a range of devices, not just the exact dimensions of Apple's products...
(If you're not familiar with responsive web design, here's the article that started it all) http://www.alistapart.com/articles/responsive-web开发者_如何学C-design
Here is quite a long list of mobile and tablet viewport sizes. It seems 533 is the cut off for tablet to mobile. http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/
I've studied websites that uses adaptive web designs over at http://mediaqueri.es/.
It seems there are no definitive numbers here. I guess the reason is that it depends heavily on how the page actually looks on different devices.
EDIT: The documentation for Twitter Bootstrap has a guideline for viewport dimensions, see http://twitter.github.com/bootstrap/scaffolding.html#responsive
For me the most complete resource available is http://viewportsizes.com/
It's easy to use and you can download the full document in .csv or .json
As a general rule, for desktop devices, you subtract 120 or 130 pixels from the height.
For example a non-mobile device with a 1920x1080px resolution will have a 1920x950 or 1920x960 viewport. 1440x900 would have 770px height etc.
A good, up-to-date, resource for mobile devices is https://yesviz.com/devices.php.
精彩评论