How to Design Web Apps for Android That Fit Different Screen Sizes

Auto Screen Size Adjustment

1. Open the source code file for your Web application in a text editor program.

2. Go to the top of the source document, find the '

' section and insert the following code below the '

' tag or grouped with other '

' tags:

3. Save the file in your text editor, upload it to your hosting server and visit the website address on your Android device.

Design Principles

4. Create icons for your Web app that are not too small for the largest screen and not too large for the smallest screen. You must find an equal medium where icons and other graphics look presentable on each screen size.

5. Use high definition icons and graphics that have a 300 dots-per-inch or higher value. High-definition graphics look clean and crisp on larger screens and don't lose their quality when scaled down to fit on a smaller screen.

6. Set the font size for text so it's readable on small and large screens. A 12-point font for most font faces can be read on most mobile phone screens. However, you may have to adjust this value up or down slightly based on the font face you use in your Web application.

7. Create a stationary horizontal menu for your Web app. A horizontal menu with an absolute positioning value keeps the menu fixed in its location, regardless if the user scrolls up or down on the page. The ideal location for a horizontal menu is at the top or bottom.