Essential knowledge for mobile terminal development (reprint)_html/css_WEB-ITnose

1: Basic concepts

( 1) CSS pixels and device pixels

CSS pixels ：

device pixels：

( 2 ) PPI/DPI

PPI/DPI: Pixels per inch The higher the number of pixels it has, the higher the density the display can display images.

Calculation of PPI:

First calculate the alignment of the phone screen The equivalent pixels of the diagonal line are then divided by the diagonal line (what we usually call the mobile phone screen size refers to the length of the diagonal line of the mobile phone screen)

(3)PPI density determination ratio

120-160: low density mobile phone

160-240: medium density

240-320: high density

320 and above: ultra-high density (retina)

Here comes the key question:

When a 320px page is displayed in 4 and 4s, you will find that It's full width.

Reason: The page is enlarged 2 times by default, which is 640px, and the width of 4 and 4s is officially 640px

(4) Use of viewport

content="

height=[ pixel_value | device-height ],

width=[ pixel_value | width-height ],

initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,

user-scalable =[yes | no] ,

target-densitydpi = [dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

Among these attributes, we focus on target-densitydpi, this attribute It is possible to change the device's default scaling.

medium-dpi is the default value of target. If we explicitly define target-densitydpi=device, then the device will render the page according to the real dpi. For example, if a 320*480 picture is placed in an iPhone 4, it will fill the screen by default. However, if target-densitydpi=device-dpi is defined, the picture will only occupy a quarter (half) of the screen. square of one), because the resolution of iPhone4 is 640*960.

Two: Solution

(1) Simple and crude

If we create the page according to the 320px wide design draft , and without any settings, the page will automatically scale by default to the same width as the mobile phone screen (this is because medium-dpi is the default value of target-densitydpi, and different densities correspond to different scaling ratios. All of this is for mobile devices. automatically completed). So this solution is simple, crude and effective. But there is a fatal flaw. For mobile devices with high passwords and ultra-high passwords, the pages (especially pictures) will be distorted, and the higher the density, the more severe the distortion.

( 2 ) Extremely perfect

In this solution, we use

target-densitydpi = device-dpi. In this way, the mobile phone The device will render according to the real pixel tree. In professional terms, 1 CSS pixel = 1 device pixel. For example, for a 640*960 iPhone, we can create a 640*960 page, and there will be no scroll bars when displayed on the iPhone. Of course, for other devices, pages of different sizes also need to be produced. All such solutions often use media queries to make responsive pages. This solution can render perfectly at a specific resolution, but the more different resolutions you want to be compatible with, the higher the cost because you need to write separate code for each resolution.

 1 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" / > 2 #header{  3 background:url(medium-density-image.png);  4 }  5 @media screen and (-webkit-device-pixed-ratio:1.5){  6 /* CSS for high-density screens */  7 #header { background:url (high-density-image.png);}  8 }  9 @media screen and (- webkit -device-pixel-ratio:0.75) { 10 /* CSS for low-density screens */ 11 #header { background:url (low-density-image.png);} 12 }

(3) Reasonable compromise

For Android devices, most of them are high density and some are medium density. We can adopt this solution: we restore the 480px wide design draft, but make the page 320px wide (use background-size to reduce the image), and then let the page automatically scale according to the proportion. In this way, low-density mobile phones have scroll bars (basically no one is using this kind of mobile phone anymore), medium-density mobile phones will waste a little bit of data, high-density mobile phones display perfectly, and ultra-high-density mobile phones have slight distortion ( There are very few ultra-high-density Android phones). The advantages of this solution are very obvious: only one set of design drafts and one set of code are needed (here we only discuss the situation of Android phones)

I read this article once and feel that it is necessary to understand Some basic concepts are very helpful, so after you get them, you may still be able to use them when explaining to others. There is also content about development and debugging below this blog, which is not listed. Here is the link: http:/ /blog.jobbole.com/31023/

Since I have no front-end development experience, and the first company is a company with very, very many mobile projects, basically, similar things in the future will definitely be huge. many. Friends who are unfortunate enough to come to my blog are welcome to communicate with me. As you can see, there is basically nothing of value here. There will definitely be something in the future. Welcome to add me on Qiuqiu: 11580563 to communicate