Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to achieve mobile development using HTML5". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to implement mobile development using HTML5" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.

1. Pop-up numeric keypad

Android and IOS should behave differently, so you can try it for yourself. When you use regular pattern, you don't have to worry about the type of input.

two。 Call some functions of the system

Call: 10086, text: 10086, email: 839626987@qq.com

3. Open native application

Open Wechat, open Alipay, open Alipay's scan function, open Alipay's ant forest.

This method, called URL Scheme, is a protocol that is generally used to access a function / page in APP or APP (such as opening a specified page or using certain functions after waking up APP)

The basic format of URL Scheme is as follows:

Behavior (a feature / page of the application)

| |

Scheme:// [path] [? query]

| | |

Parameters required to apply the identification function

It is generally defined by APP developers themselves, such as specifying some parameters or paths for other developers to access, as in the example above.

Note:

The condition to wake up APP is that the APP is already installed on your phone.

Some browsers disable this protocol, such as Wechat internal browsers (unless whitelisted)

4. Solve active pseudo-class failure

Just register an empty event for body

5. Ignore automatic recognition

When the content on the page contains a mobile phone number / mailbox, etc., it will be automatically converted into clickable links

For example, you have the following code:

13192733603

But some browsers will recognize it as a mobile phone and can click to dial.

6. The page does not rebound after solving the input out of focus.

Wechat internal browsers that generally appear in IOS devices appear under the following conditions:

The page height is too small.

When focusing, when the page needs to move up

Therefore, generally speaking, input will not appear at the top or top of the page and cannot be bounced back.

The solution is to get the current scroll bar height when in focus, and then the height obtained before assignment when out of focus:

Export default {data () {return {scrollTop: 0}}, methods: {focus () {this.scrollTop = document.scrollingElement.scrollTop;}, blur () {document.scrollingElement.scrollTo (0, this.scrollTop);}

7. Long press is prohibited.

The above behaviors can be summarized into these (each phone and browser behave differently): long press the picture to save, long press to select text, long press the link / mobile number / mailbox to call out the menu.

To disable the default behavior of these browsers, you can use the following CSS:

/ / prohibit saving img {- webkit-touch-callout: none; pointer-events: none; / / like Wechat browser can not be prohibited, add this line style can} / / prohibit long-press to select the text div {- webkit-touch-callout: none;} / / prohibit long-press outbound menu div {- webkit-touch-callout: none;}

8. The slide is not smooth and the hands are sticky.

It usually occurs in IOS devices. The custom box uses overflow: auto | | what happens after scroll.

Optimize the code:

Div {- webkit-overflow-scrolling: touch;}

9. When the screen is rotated to landscape, the font size will change.

The specific situation is unknown, sometimes there is sometimes not, welcome to point out.

Optimize the code:

* {- webkit-text-size-adjust: 100%;}

10. The simplest rem adaptation

As we all know, the value of rem is calculated based on the font size of the root element, but the size of each device is different, so the font size of the root element should be set dynamically.

Html {font-size: calc (100vw / 3.75);} body {font-size: .14rem;}

The effect is as follows:

11. Sliding penetration

When you want to lock the user's scrolling behavior when a mask appears, you can do so.

Suppose the structure of HTML is as follows:

I am the bouncing frame.

The CSS style is as follows:

.mask {position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba ($color: # 333, $alpha: .6); .content {padding: 20px; background-color: # fff; width: 300px;}}

The effect is as follows:

As you can see, when you slide over the mask, it penetrates to the parent node, and the easiest way is to block the default behavior:

Document.querySelector (".mask") .addEventListener ("touchmove", event = > {event.preventDefault ();})

If you are in vue, you can write:

If .content also has a scroll bar, just block the mask itself:

Document.querySelector (".mask") .addEventListener ("touchmove", event = > {if (event.target.classList.contains ("mask")) event.preventDefault ();})

Or:

After reading this, the article "how to implement mobile development with HTML5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.