Mobile front-end development summary

Mobile front-end development, also known as webapp, is mainly for high-end mobile phones such as Iphone and Android.

1. Disable user screen rotation.

This can definitely be said to be impossible. Because there was a project that needed to prohibit screen rotation before, I checked a lot of information online and found that there is no solution at all, and it is impossible to do it in the mobile version of webkit. The Apple API also explains that in order for users to browse the web normally in Safari, we must ensure that Safari can display web content normally (that is, adaptive) when the user's device is in any orientation, so we prohibit developers from Block the orientationchange event of the browser, so ios prohibits blocking the orientationchange event, and the same goes for Android. It cannot prohibit screen rotation, so it cannot be done in the webapp. However, the orientationchange event can be used to determine the direction. The display mode for horizontal screen and the display mode for vertical screen can be written in two styles.

2. Private meta tag of webkit kernel

1. content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
2. content="black" name="apple-mobile-web-app-status-bar-style" />
3. content="yes" name="apple-mobile-web-app-capable" />
4. content="telephone=no" name="format-detection" />

(1). The main thing is to force the document width and device width to remain 1:1, with a maximum width of 1.0, and to prohibit screen scaling.

(2), iphone’s private label, the style of the status bar at the top of iphone.

(3). This is also a private label for iPhone, allowing full-screen browsing.

(4). Disable automatic recognition of numbers as phone numbers. This is more useful, because a string of numbers will be displayed in blue on the iPhone, and adding other colors to the style will not take effect.

3. Remove Android’s automatic recognition of email addresses

Android has automatic email recognition function, but Apple does not. If you want to remove the mailbox recognition function, add a meta tag to the head.

1. content="email=no" name="format-detection" />

4. Remove the url address bar of Android and ios

1. setTimeout(scrollTo,0,0,0);

Just put this sentence in window.onload.

(Reference: WEB front-end http://www.linzenews.com/program/web/2773.html)