Mobile web Front-end summary (I): mobile web Front-end summary

Mobile web Front-end summary (I): mobile web Front-end summary

During this time, I made several front-end pages for mobile projects, just like webapp. I have never touched any knowledge about mobile terminals before doing these projects. I think there is no difference with PC-side pages, but the size is a little smaller. After getting started, I found many problems. The following is a summary of the framework, related knowledge points, problems encountered, solutions, and existing confusions. I have been in contact with you for more than a month, and I hope you will be able to solve this problem for me. Thank you ~~ Use Bootstrap and HTML5 Boilerplate to start a project.
Control the display area (also used on the PC end ):
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 
 

  
  
Width-the width of the viewport (area of view)
  
  
Height-the height of viewport
  
  
Initial-scale-initial scaling ratio
  
  
Minimum-scale-minimum scale allowed by users
  
  
Maximum-scale-maximum scale allowed by users
  
  
User-scalable-whether the user can manually Scale
 
 
Safari in IOS allows full screen viewing:
<meta content="yes" name="apple-mobile-web-app-capable">
Safari Top status bar style in IOS:
<meta content="black" name="apple-mobile-web-app-status-bar-style">
Ignore changing numbers into phone numbers:
By default, the IOS and Android systems recognize numbers within a certain length as phone numbers, which may cause incorrect operations.
<meta content="telephone=no" name="format-detection">
 
2. link label
Save Safari to the desktop icon:
By setting the apple-touch-icon label, the icon added to the home screen will use the image of the specified size.
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57-precomposed.png" /><link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /><link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" />       
Add a launch screen similar to NativeApp to the WebApp:
<link rel="apple-touch-startup-image" href="apple-touch-icon.png" />
 
3. Font Awesome)
: Http://fontawesome.dashgame.com/very useful documentation.
Webpage (HTML ):
<Link href = "css/font-awesome.min.css" rel = "stylesheet" type = "text/css"> <! -- Icon font V4.3.0 -->
<i class="fa fa-camera-retro"></i> fa-camera-retro
Effect: PS usage:
The FontAwesome. otf file is included in the pack. Install the font on your computer and restart PS.
Go to http://fortawesome.github.io/font-awesome/cheatsheet/copy to start with. 4. CSS3-webkit-box.
The width of the parent element of the stream layout is equal to that of the quilt element.
For example, the parent element is divided
HTML code: <article> <section class = "sectionOne"> 01 </section> <section class = "sectionTwo"> 02 </section> <section class = "sectionThree"> 03 </ section> </article>
CSS code :. wrap {width: 600px; height: 200px; display:-moz-box; display:-webkit-box; display: box ;}. sectionOne {background: orange;-moz-box-flex: 3;-webkit-box-flex: 3; box-flex: 3 ;}. sectionTwo {background: purple;-moz-box-flex: 2;-webkit-box-flex: 2; box-flex: 2 ;}. sectionThree {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1; background: green ;}
Effect: can refer to this article: http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/
5. The problem of changing the font size on the screen (-webkit-text-size-adjust: none)
Css code:
Html {height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; text-size-adjust: 100%; /* prevent the font from being automatically reset by the browser */font-size: 62.5% ;}
6. CSS3 new font unit (rem)
Explanation: Unit of relative length. This is a multiple of the calculated values relative to the root element (html element) font-size.
Purpose: it is a headache to calculate the size with em and percentage. When there are too many nested values, I will be dizzy and use px instead, but px is fixed. Because the reference point of rem only contains the root element, we can set a proper size for the root element. The default font-size from IE6 to Chrome root element is 16px (Is that true ?).
Css code: html {font-size: 62.5%;/* 10 bytes 16 = 62.5% */}
After the root element is set (10px): font-size: 12px; equivalent to font-size: 1.2rem;
 
7. Buttons Style
Address: http://www.bootcss.com/p/buttons/
A Css3 animation solution.
Download and demo address: http://www.html580.com /? Ky37dClP
 
9. Page gesture operations (hammer. js)
Explanation: hammer. js is an open-source Mobile Script framework that perfectly implements most events in mobile development, such as click, slide, drag, and multi-touch events. You do not need to rely on any other frameworks, and the entire framework is very small. It is very simple to use.
Read the article http://www.cnblogs.com/iamlilinfeng/p/4239957.html of this great god
 
To be continued ......