Html adaptation to Anroid mobile phone

This article is an official Google tutorial for translation and summarization, and ensures the correctness of the document.

So that everyone will not be confused by a wide variety of other materials, and there will be no systematic learning.

1. Set window size and screen resolution

The official Google documentation mentions two major aspects.

1. Viewport View window

This is set in html. It mainly sets the height and width, as well as the initial ratio column. The width and height will definitely show how many pixels in CSS are available in html.

The width of the Viewport has no decisive relationship with the width of the screen. For example, if your mobile phone width is PX, but you can set the Viewport width to 960PX, a PX image will be displayed completely at one time, because many browsers such as chrome will zoom as much as possible, to display the entire webpage on a screen, that is, the width of 960PX.

Note: When webView is used, the global summary mode is not used by default. That is to say, it will automatically zoom out. Just set it in this way.setUseWideViewPort().

    Example    
 

 pixel_value | "device-width"] ,          initial-scale = float_value ,          minimum-scale = float_value ,          maximum-scale = float_value ,          user-scalable = ["yes" | "no"]          " />

Note: Do not disable user-scalable unless you are sure that your program is automatically adapted and can be used at the minimum size.

2. Screen Resolution

The unit of pixels written by html in CSS is equivalent to DPI in Android. For a DPI mobile phone, the unit will be enlarged. For example, if a 300-pixel-wide image can be normally displayed in PI, but the phone number in DPI will be doubled, and the image will be distorted, blurred, and textured.

2. Use CSS to adapt

1. Use different CSS for different resolutions

You can set the attribute-webkit-device-pixel-ratio to 0.75, 1, and 1.5 to correspond to low rate, medium resolution, and high resolution. In fact, it is written below

2. Use different styles and style sheets as follows:

#header {    background:url(medium-density-image.png);}@media screen and (-webkit-device-pixel-ratio: 1.5) {    /* CSS for high-density screens */    #header {        background:url(high-density-image.png);    }}@media screen and (-webkit-device-pixel-ratio: 0.75) {    /* CSS for low-density screens */    #header {        background:url(low-density-image.png);    }}