Mobile front-end development summary and mobile Development Summary

Mobile front-end development summary and mobile Development Summary

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

1. Disable User Screen rotation.

This is definitely not possible. Previously, because a project needed to disable screen rotation, a large amount of information was found on the internet and there was no solution at all. It was not possible in the mobile webkit. Apple api also shows that in order for 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 the browser orientationchange event, so ios prohibits the orientationchange event, and Android does the same, it is also unable to prohibit screen rotation, so it cannot be done in webapp. However, you can use the orientationchange event to determine the direction. The display mode of the horizontal screen and the display mode of the vertical screen can be written into two styles.

 

2. Private meta tag of webkit Kernel

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

(1) The main I is to force the document width to keep the device width at, the maximum width of 1.0, prohibit screen scaling.

(2) Private tags of the iphone, the style of the status bar on the top of the iphone.

(3) This is also a private iphone tag that allows full screen browsing.

(4) do not allow numbers to be automatically recognized as phone numbers. This is useful because a string of numbers will be displayed in blue on the iphone, and style addition colors will not take effect.

3. Remove automatically recognized email addresses from Android

Android supports automatic email recognition, but apple does not. To remove the email recognition function, add a meta tag to the head.

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

4. Remove the url address bar of Android and ios

1. SetTimeout (scrollTo, 0, 0 );

Put this sentence in window. onload.

 

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