Essential knowledge for mobile development (reposted)

Essential knowledge for mobile development (reposted)

I. Basic Concepts

(1) CSS pixels and device pixels

CSS pixels:

Device pixels:

 

(2) PPI/DPI

PPI/DPI: the number of pixels per inch. The higher the value, the higher the display density.

 

 

Calculation of PPI:

Calculate the diagonal equivalent pixel of the mobile phone screen and divide it by the diagonal line (we usually call the cell phone screen size the length of the diagonal line of the mobile phone screen)

 

(3) determine the proportion of PPI Density

120-160: Low Density mobile phone

160-240: Medium Density

240-320: High Density

More than 320: Super high density (retina)

Key issues:

One 320px page is displayed in 4 and 4s, and you will find that it is full width.

Cause: the page is magnified by 2 times by default, that is, 640px, while the width of 4 and 4s is 640px.

 

(4) use of viewport

<Meta name = "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] "/>

In these attributes, we focus on target-densitydpi, which can change the default scaling of the device.

Medium-dpi is the default value of target. If we display and define target-densitydpi = device, the device will render the page according to the actual dpi. For example, if a 320*480 image is placed in iPhone 4, the screen is full by default, but if the target-densitydpi = device-dpi is defined, the image only accounts for 1/4 of the screen (1/2 square meters), because the iPhone 4 Resolution is 640*960.

 

Ii. Solution

(1) Simple and rude

If we create a page based on the px wide design without any settings, the page will automatically scale to the same width as the phone screen by default (because medium-dpi is the default value of target-densitydpi, it is determined by the scaling ratio corresponding to different density, which is automatically completed by the mobile device ). This solution is simple, crude, and effective. However, there is a fatal drawback. for mobile phone devices with high passwords and ultra-high passwords, the page (especially the picture) will be distorted, and the more density, the more distorted.

(2) perfection

In this solution, we use

Target-densitydpi = device-dpi. In this way, mobile devices are rendered based on real pixel trees. In professional words, 1 CSS pixel = 1 device pixel. For example, for the iphone 640*960, we can make a 640*960 page, and there is no scroll bar on the iphone. Of course, for other devices, you also need to create pages of different sizes.Media QueryTo form a responsive page. This solution can be perfectly presented at a specific resolution, but the higher the Resolution, 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 the vast majority of Android devices are high-density, and some are medium-density, we can adopt this solution: We will restore the px wide design draft, however, the page is px wide (the background-size is used to scale down the image), and the page is automatically scaled proportionally. In this way, a low-density mobile phone has a scroll bar (this type of mobile phone is basically no longer in use), the middle-density mobile phone will waste a little bit of traffic, the high-density mobile phone is perfectly presented, ultra-high-density mobile phones are slightly distorted (very few Android phones ). This solution is a little obvious: you only need a design draft and a set of code (Here we only discuss the situation of Android phones)

 

I have read this article and I think it is very helpful to understand some basic concepts. So I may be able to explain it to others later, this blog below there is about the development debugging content, not listed, first give the link: http://blog.jobbole.com/31023/

Since there is no front-end development experience, and the first company is a mobile project very many companies, basically all of them, there will certainly be a lot of similar things in the future. Welcome to my blog. You can also see that there are basically no valuable things here. You will certainly have some in the future. Please add me to the ball: 11580563.