Mobile-side, mobile-side development considerations:

1. Meta tag use
<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name= "viewport" >
<meta content= "yes" name= "apple-mobile-web-app-capable" >
<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style" >
<meta content= "Telephone=no" name= "Format-detection" >
The 1th meta tag indicates that the width of the document is forced to remain 1:1 with the width of the device, and the maximum width of the document is 1.0, and the user is not allowed to click on the screen to enlarge;

The 2nd meta tag is the safari private meta tag in the iphone device, which says: Allow full-screen mode browsing;

The 3rd META tag is also the iphone's private label, which specifies the style of the iphone's status bar on the top of safari;

The 4th meta tag means: Tell the device to ignore numbers on the page as phone numbers

2, try to use H5 label
3. Use Display:inline-block as much as possible instead of float property
4, block-level a label, because on the touch phone, in order to enhance the user experience, as far as possible to ensure that the user's larger clickable area.
5, self-adapting layout. Width Don't write dead
6, learn to use Webkit-box
7. How to remove the recognition of email address in Android platform?
<meta content= "Email=no" name= "Format-detection"/>
8. How to remove control bars for input URLs in iOS and Android

Your boss or PD or interaction designer may ask you: Can you make our webapp more like Nativeapp, and I don't want the user to see the control bar that entered the URL?

The answer is that it can be done. We can use a simple JavaScript code to achieve this effect

SetTimeout (scrollto,0,0,0);

Please note that this code must be placed in the window.onload to work properly, and the content of your current document must be higher than the height of the window, this code can be effectively executed.
9. How to turn off keyboard auto capitalization in iOS

We know that in iOS, when the virtual keyboard pops up, by default the keyboard is the first capitalization feature, depending on the business scenario, we may need to turn this feature off, mobile version WebKit provides the autocapitalize attribute for the INPUT element, Turn off the default initial capitalization of the keyboard by specifying autocapitalize= "off".
10. How to prevent users from selecting text in iOS
We can prevent iOS users from selecting text by specifying the-webkit-user-select property of the text label to none.
11. How to get the scroll bar value in iOS

The value of the scroll bar that you want to get in the desktop browser is obtained through document.scrolltop and Document.scrollleft, but in iOS you will find that the two properties are undefined and why? Because there is no scroll bar concept in iOS, the values of the scroll bar can be obtained by using these two properties in Android, so how do we get the value of the scroll bar in iOS?

With window.scrolly and window.scrollx we can get the values of the current window's y-axis and x-axis scroll bars
12, how to solve the box border overflow

When you specify a block-level element, and you define a border for it, set its width to 100%. In mobile device development, we usually define the text box as width 100%, define it as a block-level element for full-screen adaptive style, but you will find that the element's border (left and right) each pixel will overflow the document, resulting in a horizontal scroll bar, in order to solve the problem, We can add a special style-webkit-box-sizing:border-box for it, which specifies the size of the box to include the width of the border.

Mobile-side, mobile-side development considerations: