WebApp pits record [in update]

Online there are many webapp pits records, these months, I have done in the company just 2, encountered some problems, so I am here to record the problems I encountered:

• Meta Header
  at the time of development, just create an HTML file, and then use the browser's phone mode is no effect on the phone, so to add in the head:
  

   <  meta  charset  = "Utf-8"   name  =" viewport "  content  = "Width=device-width, initial-scale=1.0, User-scalable=no, minimum-scale=1.0, maximum-scale=1.0 " />  

  This string of code will simulate the effect of the phone , and there are other benefits:

  width=device-width: Indicates the width is the width of the device screen 
   initial-scale=1.0: Represents the initial zoom scale 
   User-scalable=no: Indicates whether the user can adjust the zoom scale 
   Minimum-scale=1: Represents the minimum scale 
   Maximum-scale=1: Represents the maximum zoom ratio 

  
  
  

• CSS width using rem
  This online has a lot of source code can be used, load not time-out more than 10 K size bar, simple and easy to use, the advantage is such as 0.5rem size of the font can be automatically scaled according to the size of the phone screen, but some can not, can use PX instead, such as: border, Background-size, and so on, still have width, height, also try to use percentage to control will be good point;
  
  
  
• Page Layout Flex
  As far as possible flex layout, about the top and bottom, left and right center are very convenient, here is a blog I have written about the flex layout of the http://www.cnblogs.com/Grewer/p/7618096.html
  The most important point is that in the flex layout, if the maximum node height is set to 100%, pay attention to the problem of mobile phone soft keyboard, click on the soft keyboard may cause the element to scale, this time can use flex-shrink:0
  With flex layouts, it's a good idea to define a global variable, such as. Flex{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox; Display:flex;} And then the other pages with the Flex class can be easily used;
  
  
  
• Form submission
  In the WebApp the experience of the form submission is very poor, may H5 API does not have any good support, such as filling in the account and password, I just filled out the account, the soft keyboard in the lower right corner is determined or confirmed the words, very strange; Although you can listen to the action of the return, to the password bar, But for this I still have obsessive-compulsive disorder, but I also did not have any good method to solve;
  In one is to fill in the account password, after filling out the password, the lower right corner is still the same as above, and there is no change, but this can be added form form the method to solve, the details please search by yourself;
  There is to be able to fill in all the numbers when the type of input as far as possible to write number so soft keyboard when the digital keyboard is opened, than the text experience will be much better;
  Then upload the picture problem, although only need to add a input type= "file" tag on the line, but still no API can freely choose whether the source of the photo is a camera or album, I search the internet when I found that they say is capture= "camera" This can solve , but I personally test my iPhone and Android are not effective, and no add the same;
  
  
  
• IPhone comes with a-tag effect
  I do not know if you have this, anyway, I have here, is the original light gray underline, click or refresh any page, then go into this page, the underline color will become deeper, feel a lot more thin, this is the IPhone's own effect
  Can be the same as the global or local definition of a label to solve, such as I a:link {color: #d9d9d9}a:visited {color: #d9d9d9}
  
  
• Border
  Border width problem, many people want to use width of 0.5px width to set the border, but because the phone model of the problem will let some normal display, but also can not display, this may use my way to set

  {        border-bottom: 1px dashed #888;         content: "";         Display: block;         width:100%;         -webkit-transform: Scale (1, 0.5);         Transform: Scale (1, 0.5);    }

  
  
  Pending Update Loading ...

WebApp pits record [in update]