Search code examples
androidhybrid

Web page width on Android tablet


I am beginner on hybrid development. So I wanted to know the best practice of web design width when we working on tablet size?


Solution

  • Below are the sizes I like to design for; not all of these may be ideal for your needs, however I find this tend to provide the cater to the most common configurations of devices out there. When I refer to device width, it is in "device independent pixels" :P

    1024px

    This is the typical device width of 1:1 scale tablet in landscape mode, which also lends itself well to larger computer monitors.

    iPad Technical Specifications Note: iPad with Retina display still maintains a device width in the browser of 1024px in landscape, and 768px in portrait Android Developers: Supporting Multiple Screens

    1023-980px

    This is the default viewport width for iOS devices (which is supposed to represent the "average" website width), which also lends itself well to average sized computer monitors.

    iOS Developer Library: Configuring the Viewport

    979-768px

    This is the device width of an Apple iPad in portrait mode. Note: Many 16:9 Android tablets have a device width of 720px: Android Developers: Supporting Multiple Screens

    iPad Technical Specifications Note: iPad with Retina display still maintains a device width in the browser of 1024px in landscape, and 768px in portrait

    767-480px

    This is the typical device width of 1:1 scale phone in landscape mode.

    iOS Developer Library: Layout and Metrics on iPhone and iPod touch Android Developers: Supporting Multiple Screens Blackberry Development Guide: Developing applications for different screen sizes