Mobile platform front-end development Summary (for iPhone, Android, and other mobile phones)

Mobile platform front-end development is a site adaptation for high-end smartphones (such as iPhone and Android), that is, webapp, not for general mobile phones, so read this articleArticleIn the past, you needed to have a certain understanding of WebKit kernel browsers and HTML5 and css3.

1. First, let's take a look at some private meta tags in the WebKit kernel. These meta tags play a very important role in webapp development.

(1) <meta content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; User-scalable = 0" name = "viewport"/>
(2) <meta content = "yes" name = "apple-mobile-web-app-capable"/>
(3) <meta content = "black" name = "apple-mobile-web-app-status-bar-style"/>
(4) <meta content = "telephone = No" name = "format-detection"/>
The first meta tag indicates that the width of the document must be kept at with the width of the device, and the maximum width of the document is 1.0. Users are not allowed to click the screen to zoom in; in particular, the setting of multiple attributes in content must be separated by semicolons and spaces. Otherwise, the setting will not work.
The second meta tag is the safari private meta tag in the iPhone device. It indicates that full-screen viewing is allowed;
The third meta tag is also a private tag of the iPhone. It specifies the pattern of the status bar at the top of safari in the iPhone;
The fourth meta tag indicates that the device ignores the need to recognize numbers on the page as phone numbers.

2. How to remove the email address recognition in the Android platform
Anyone who has read the IOS webapp API knows that IOS provides a meta tag to disable IOS's automatic identification of phone numbers on the page. In iOS, the email address is not automatically recognized, but on Android, the email address is automatically detected. When the user reaches the email address, android will pop up a box prompting the user to send an email. If you do not want android to automatically identify the email address on the page, add the meta tag in the head.

<Meta content = "email = No" name = "format-detection"/>

3. How to remove the control bar of the input URL in iOS and Android
Your boss or Pd or interaction designer may ask you: can we make our webapp more like nativeapp? I don't want users to see the control bar that inputs the URL?
The answer is yes. We can use a simple JavascriptCodeTo achieve this effect.

SetTimeout (scrollto, 0, 0 );
Please note that this code must be placed in window. onload can work normally, and the content height of your current document must be higher than the window height, this code can be effectively executed.

4. How to disable the user from rotating the device
I once wanted to disable the user from rotating the device, and also wanted to run normally only in portrait or Landscape mode like some clients. But now I can tell you responsibly: Don't think about it! It cannot be done in WebKit of mobile version!
At least Apple webapp API has already said: to allow users to browse webpages normally in Safari, we must ensure that the user's devices are in any location, safari can normally display webpage content (that is, adaptive), so we prohibit developers from blocking browser orientationchange events. It seems that Apple's starting point is correct, and Apple is indeed not a general apple.
IOS prohibits developers from blocking the orientationchange event. What about Android? Sorry, I did not find any information saying that android prohibits developers from blocking the browser orientationchange event, but it cannot be blocked on the Android platform.

5. How to check whether a user starts your webapp on the home screen
Anyone who has read the apple webapp API knows that IOS provides safari with the function of adding the current page to the home screen. Press the plus sign in the tool at the bottom of iPhone \ iPod Touch, or a small plus sign on the left side of the top of the iPad, you can add the current page to the home screen of the device. A start icon for the current page is automatically added to the home screen of the device, click the start icon to start your webapp quickly and conveniently. The biggest difference between a webapp started on the home screen and a webapp accessed by a browser is that it clears the toolbar above and below the browser, so that your webapp is more like a nativeapp, another difference is that the window has a standalone attribute for the navigator sub-object in the image. Navigator. standalone is false. When webapp is started from the main screen, navigator. standalone is true. We can use navigator. the standalone attribute determines whether the user accesses our webapp from the main screen.
It has never been added to the main screen in Android!

6. How to disable automatic upper case of the keyboard in IOS
we know that in iOS, when the virtual keyboard pops up, the upper case of the first letter is enabled by default, depending on some business scenarios, we may need to disable this function. The mobile version of WebKit provides the autocapitalize attribute for the input element, and disables the default upper Letter of the keyboard by specifying autocapitalize = "off.