开发者

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:

  • viewport dimensions, so available size within browser window
  • both height and width because there's actually a range of ratios
  • in both landscape and portrait modes
  • 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.

    0

    上一篇:

    下一篇:

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    最新问答

    问答排行榜