Mobile front-end summary-Chapter 1 ., Mobile front-end summary chapter 1

Mobile front-end summary-Chapter 1 ., Mobile front-end summary chapter 1

I have been not very familiar with mobile projects, and I am very little familiar with them. I am using some percentages. I am doing nothing about it.

I. first look at the header.

<meta name="format-detection" content="telephone=no, address=no, email=no">

Format-detection: "format detection". As its name suggests, it is used to detect some formats in html, the format-detection attribute of meta mainly includes the following settings:
Meta name = "format-detection" content = "telephone = no"
Meta name = "format-detection" content = "email = no"
Meta name = "format-detection" content = "adress = no"
You can also write: meta name = "format-detection" content = "telephone = no, email = no, adress = no"
The role of each setting is described as follows:
1. telephone
The link style is not added to a string of numbers you clearly write, and the iPhone will automatically add the link style to your text, and click this number to automatically dial! How can I remove this dial-up link? At this time, our meta should be superb again. The Code is as follows:
If telephone is set to no, the number cannot be converted to a dial-up link!
Telephone = yes enables converting numbers to dial-up links. To enable the conversion function, you do not need to write this meta. By default, this function is enabled!

2. email
Indicates that the device does not recognize the email address. The email address is not automatically sent after the email address is clicked.
Email = no is prohibited as the email address!
Email = yes indicates that the text is enabled by default as the email address. This meta does not need to be written. It is enabled by default!

3. adress
Adress = no: Do not jump to the map!
Adress = yes enables the click address to jump directly to the map function, which is enabled by default!

<meta name="apple-mobile-web-app-capable" content="yes" />

The website enables support for web apps.

 

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

The color of the status bar (the top bar of the screen) in the web app;
The default value is default (white), which can be set to black (black) and black-translucent (gray translucent ).
If the value is "black-translucent", it will occupy the page px position and float above the page (20 px height will be covered-the Retina screen of iPhone 4 and itouc4is 40px ).

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

1. The viewport has been translated as a "viewport ";

In layman's terms, viewport on a mobile device is the area on the device's screen that can be used to display our webpage. Specifically, it is a browser (or webview in an app) the area used to display the webpage, but the viewport is not limited to the size of the visible area of the browser. It may be larger than the visible area of the browser, or smaller than the visible area of the browser. By default, the viewport on a mobile device is larger than the visible area of the browser. This is because the resolution of a mobile device is relatively small than that of a desktop computer, so in order to display those traditional Websites designed for desktop browsers on mobile devices, browsers on mobile devices set their default viewport to 980px or 1024px (or other values, which are determined by the device ), however, the consequence is that the browser will display a horizontal scroll bar, because the width of the visible area of the browser is smaller than the width of the default viewport.

If the meta viewport label is not set, the default width of the browser on the mobile device is 800px, 980px, 1024px, and so on. In short, the width is greater than the screen width. The Unit px used here is the px in css, which is not the same as the px representing the actual physical pixels on the screen.

Lists the default viewport width of browsers on some devices.

The 1px in 2.css is not equal to the 1px of the device.

In css, we generally use px as the unit. In a desktop browser, one pixel of css usually corresponds to one physical pixel on the computer screen, which may lead to our illusion, that is, pixels in css are physical pixels of devices. However, this is not the case. pixels in css are only an abstract unit. In different devices or environments, 1px in css represents different physical pixels of devices. In web pages designed for desktop browsers, we don't need to worry about this, but we must understand this on mobile devices. In earlier mobile devices, the screen pixel density was relatively low. For example, iPhone 3 has a resolution of 320x480. on iPhone 3, a css pixel is indeed equal to a screen physical pixel. Later, with the development of technology, the pixel density of mobile devices is getting higher and higher. From iPhone 4, Apple launched the so-called Retina screen, which doubled the resolution and changed to 640x960, the screen size remains unchanged, which means that the pixels on the screen of the same size are doubled. At this time, a css pixel is equal to two physical pixels. This is also true for mobile devices of other brands. For example, Android devices can be divided into ldpi, mdpi, hdpi, xhdpi, and other levels based on the screen pixel density. The resolution is also varied. The number of physical screen pixels that a css pixel on Android devices is equivalent, there is no final conclusion because devices are different.

Another factor is the change of px in css, that is, user scaling. For example, if a user doubles the page size, the physical pixels represented by 1px in css will also double; otherwise, the page will be doubled, the physical pixels represented by 1px in css are also doubled.

In mobile browsers and some desktop browsers, the window object has a devicePixelRatio attribute, which is officially defined as the ratio of the physical pixel of the device to the independent pixel of the device, that is
DevicePixelRatio = physical pixel/independent pixel. Px in css can be regarded as the independent pixel of the device. Therefore, through devicePixelRatio, we can know how many physical pixels a css pixel on the device represents. For example, on the iphone of the Retina screen, the value of devicePixelRatio is 2, that is, one css pixel is equivalent to two physical pixels. However, it should be noted that devicePixelRatio still has some compatibility issues in different browsers, so we cannot fully trust this feature yet.

3. The content attribute specifies the meta information content. You can set or return the meta element content attribute value.

Width: controls the viewport size. You can specify a value. If it is 600 or a special value, for example, if device-width is the width of a device, the unit is the CSS pixel when the unit is 100% ).
Height: corresponds to width and specifies the height.
Initial-scale: the initial scale, that is, the scale when the page is loaded for the first time.
Maximum-scale: the maximum scale that users can scale.
Minimum-scale: minimum scale that allows users to scale.
User-scalable: whether the user can manually scale.

4. The following is the js dynamic control related value.

<Script type = "text/javascript"> var iScale = 1; iScale = iScale/window. devicePixelRatio; // physical pixel/independent pixel; on the iphone of the Retina screen, the value of devicePixelRatio is 2, that is, one css pixel is equivalent to two physical pixels. Document. write ('<meta name = "viewport" content = "width = device-width, user-scalable = no, initial-scale =' + iScale + ', minimum-scale = '+ iScale +', maximum-scale = '+ iScale +' "> ') var iWidth = document.doc umentElement. clientWidth; document. getElementsByTagName ('html ') [0]. style. fontSize = iWidth/16 + 'px '; // The default font of the browser is 16px. </script>