7

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-design

    jumpfightgo
    • 196
    • 2
    • 9

    4 Answers4

    3

    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/

    Martin
    • 31
    • 2
    2

    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

    Anders Nygaard
    • 5,433
    • 2
    • 21
    • 30
    1

    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

    Bastien Bastiens
    • 419
    • 6
    • 16
    0

    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.

    AleksG
    • 1
    • 2