Needless to say, I also know that there are too many such articles, such as:

Viewport, forced browser full screen, IOS Web APP mode, clickable elements appear shadow (this I think there is no need to remove, the user click is the need for feedback, and this background color is just good to provide a feedback), etc., too much, these believe we baidu can find a lot of information 😂

This article focuses on some other or optimization methods. Not much 😂

1. The numeric keypad is displayed

<! -"#" "*"Symbol input --> <inputtype="tel"> <! -- pure numbers --> <input pattern="\d*">
Copy the code

Android and IOS should be different, you can try it yourself. When using regular pattern, you don’t have to worry about the input type 😂

2. Invoke certain system functions

<! --> <a href="tel:10086"> Call: 10086</a> <! --> <a href="sms:10086"</a> <! --> <a href="mailto:[email protected]"> Email: [email protected]</a> <! -- Select photo or Take photo --> < INPUTtype="file" accept="image/*"> <! -- Select video or shoot video --> < INPUTtype="file" accept="video/*"> <! -- multiple options --> <inputtype="file" multiple>
Copy the code

Ditto 🤦 came ️

3. Open native apps

<a href="weixin://"< p style = "box-sizing: border-box! Important"alipays://"< p style = "box-sizing: border-box! Important"alipays://platformapi/startapp? saId=10000007"< p style = "max-width: 100%; clear: both; min-height: 1em"alipays://platformapi/startapp? appId=60000002"< p style = "box-sizing: border-box;Copy the code

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

The basic format of a URL Scheme is as follows:

Behavior (a feature of application/page) | scheme: / / [path]? [query] | | need application identification function parametersCopy the code

This is typically defined by APP developers themselves, such as specifying parameters or paths for other developers to access, as in the example above 🍤

Matters needing attention:

  • Wake up theAPPIf you already have it installed on your phoneAPP
  • Some browsers will disable this protocol, such as wechat internal browser (unless whitelisted)

There should be an article devoted to waking up the APP😒

4. Resolve the active pseudo-class invalidation

<body ontouchstart></body>
Copy the code

Register an empty event for the body at 😂

5. Ignore automatic identification

<! -- <meta name="format-detection" content="telephone=no"> <! --> <meta name="format-detection" content="email=no">
Copy the code

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

For example, you have code like this:

<p>13192733603</P>
Copy the code

But some browsers recognize it as a phone and can dial 😒

6. Solve the problem that the page does not bounce back after input out of focus

The internal browser of wechat generally appears in IOS devices under the following conditions:

  • The page height is too small. Procedure
  • Focus, when the page needs to move up

Therefore, input will not appear at the top of the page or at the top 🤣

The solution is to get the current scrollbar height when in focus, and then assign the previously obtained height when out of focus:

<template>
  <input type="text" @focus="focus" @blur="blur">
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0
      }
    },
    
    methods: {
      focus() {
        this.scrollTop = document.scrollingElement.scrollTop;
      },
      
      blur() {
        document.scrollingElement.scrollTo(0, this.scrollTop);
      }
    }
  }
</script>
Copy the code

6. Do not long press

The above behaviors can be summarized (in different ways for each phone and browser) : hold down the image to save, hold down the text to select, hold down the link/phone number/email to call out the menu.

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

Img {-webkit-touch-callout: none; pointer-events: none; Div {-webkit-user-select: none; div {-webkit-user-select: none; Div {-webkit-touch-callout: none; }Copy the code

7. Not smooth sliding and sticky hands

Generally appeared in the IOS devices, custom box using the overflow: auto | | after scroll.

Optimized code:

div {
  -webkit-overflow-scrolling: touch;
}
Copy the code

8. The font size changes when the screen is rotated to landscape

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

Optimized code:

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

9. The simplest REM adaptation

As we all know, the rem value is calculated relative to the font size of the root element, but we have different sizes for each device, so the font size of the root element is dynamically set 😂

Font-size: calc(100vw / 3.75); } body { font-size: .14rem; }Copy the code

The effect is as follows:

Like me, lib-flexible, postCSS-Pxtorem and that’s it!

10. Slide through

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

Suppose the HTML structure is as follows:

<div class="mask">
  <div class="content"</div> </div>Copy the code

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; }}Copy the code

The effect is as follows:

As you can see, when sliding on the mask, it penetrates the parent node. The easiest way to do this is to override the default behavior:

document.querySelector(".mask").addEventListener("touchmove", event => {
  event.preventDefault({
    passive: false
  });
});
Copy the code

If in VUE, you could write:

<div class="mask" @touchumove.prevent></div>
Copy the code

If.content also has scroll bars, then simply block the mask itself:

document.querySelector(".mask").addEventListener("touchmove", event => {
  if (event.target.classList.contains("mask")) event.preventDefault({
    passive: false
  });
});
Copy the code

Or:

<div class="mask" @touchumove.self.prevent></div>
Copy the code

This way, when the mask appears the user’s slide will be locked 👌

The last

For example, 1px border and wake up APP will be followed by a separate article, because it involves more content.

The article is a little water, please lightly spray 🤦♂️

If you think this article is good, please don’t forget to like and follow 😊