Android Web App official documentation translation Chapter 5: Best Practices

1. Redirect requests from mobile devices to a Web version specially designed for mobile terminals
There are several ways to redirect requests to the mobile version of your web site using server-side redirection. The most common case is the User Agent string provided by the web browser through "sniffing ). To determine whether to provide a mobile version of your website, you only need to search for the "mobile" string in the User Agent, which can match with many mobile devices. If needed, you can also find a specific operating system (such as Android 2.1) in the user agent string ).
Note: For large-screen Android devices, full-size websites (such as tablets) are required. Therefore, the user agent does not contain the "mobile" string, however, the other parts of the user agent are basically the same. Because of this situation, when you send the mobile page of your site, make sure that the user agent contains a string.
2. Use valid DOCTYPE tags suitable for mobile devices
The most common markup language designed for mobile sites is XHTML Basic. This standard ensures that a specific tag can have the best performance on a mobile device. For example, it does not support HTML frameworks or nested tables, because these are very bad on mobile devices. In addition to declaring DOCTYPE, you also need to declare the appropriate character encoding (such as UTF-8 ).
For example:
<? Xml version = "1.0" encoding = "UTF-8"?>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml Basic 1.1 // EN"
"Http://www.w3.org/tr/xhtml-basic/xhtml-basic11.dtd">
Make sure that your web page tag is valid for the declared DOCTYPE. You can use validators (validator), such as one provided by the http://validator.w3.org.
3. Use the viewport metadata to adjust the page size.
In the section of your document, you need to provide metadata to specify how you want to render your page in the browser's viewport. For example, the metadata of your viewport can specify the height and width of the browser's viewport, the initial size of the web page, or even the target screen resolution (target screen density ).
For example:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">
To obtain