How to Design Web Apps for Android That Fit Different Screen Sizes
With a single line of code, you can make your Web app fit any size screen on Android devices. This includes the various models of Android smartphones as well as Android tablets. There is no need to know the exact screen size specification for each Android model when you use the HTML's viewport variable. In addition, use a few design principles to deliver a user-friendly graphical interface that is easy to navigate and use.
Other People Are Reading
Instructions
-
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 "<head>" section and insert the following code below the "<title>" tag or grouped with other "<meta>" tags:
<meta name="viewport" content="width=device-width, user-scalable=no" />
-
-
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.
-
1
References
- Photo Credit Justin Sullivan/Getty Images News/Getty Images
