Home > Web Front-end > HTML Tutorial > Mobile front-end development summary

Mobile front-end development summary

WBOY
Release: 2016-08-31 08:41:48
Original
1147 people have browsed it

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

Copy after login
Copy after login
Copy after login
  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.

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

4. Remove the url address bar of Android and ios

Copy after login
Copy after login
Copy after login
  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)

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template