Summary of mobile terminal H5 development commonly used skills (full of dry goods oh!)

preface

Some years after the first day to company work, finishing on the mobile end H5 development under the common problem for everyone to do share, here is a lot of oneself to the hole in the development process or have been spit worse problems, hoping to bring help, more or less like bosses can give a little praise, if there is a problem also can discuss together.

Below is the JS foundation that a month collates recently is summed up, can offer everybody to review old and know new.

I am making: github.com/Michael-lzg

HTML report

Common meta attribute Settings

Meta Some special attributes of the mobile terminal can be set according to your needs

<meta name="screen-orientation" content="portrait">//Android disables screen rotation<meta name="full-screen" content="yes">// Full screen display<meta name="browsermode" content="application">//UC application mode. If the application mode is used, the page will be full screen by default. Long pressing menus, cleaning, standard typesetting, and mandatory image display are prohibited.<meta name="x5-orientation" content="portrait">//QQ mandatory portrait<meta name="x5-fullscreen" content="true">//QQ mandatory full screen<meta name="x5-page-mode" content="app">//QQ application modeCopy the code

Telephone number identification

In iOS Safari (not in other browsers or on Android), numbers that look like phone numbers are treated as phone links, such as:

• Seven digits, such as 1234567
• A number with parentheses and a plus sign in the form :(+86)123456789
• The number of the double cable is 00-00-00111
• There are 11 digits in the format of 13800138000

Close to identify

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

Open to identify

<a href="tel:123456">123456</a>
Copy the code

Email Recognition (Android)

Android recognizes strings that match the email format, and we can use the following meta to handle the automatic identification of other emails:

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

Similarly, we can also use the label properties to enable the function of long pressing the email address to pop up the email sending function:

<a mailto:dooyoe@gmail.com">[email protected]</a>
Copy the code

CSS article

0.5 px thin lines

With the increasing number of H5 projects on mobile, designers are increasingly demanding UI requirements, such as 1px borders. In HD, 1px on mobile will be thick.

So why is this a problem? It’s all about one thing, the devicePixelRatio (DPR), which is the ratio of device pixels to CSS pixels with the default scale of 100%. The current mainstream screen DPR=2 (iPhone 8), or 3 (iPhone 8 Plus). In the case of a 2x screen, the physical pixel of the device has to be 1 pixel, and the DPR is 2, so the CSS can only be 0.5 pixels.

The most common methods are described below

/* Bottom border */
.b-border {
  position: relative;
}
.b-border:before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* Top border */
.t-border {
  position: relative;
}
.t-border:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* Right border */
.r-border {
  position: relative;
}
.r-border:before {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #d9d9d9;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* Left border */
.l-border {
  position: relative;
}
.l-border:before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #d9d9d9;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/* Four sides */
.setBorderAll {
  position: relative;
  &:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-radius: 4px; }}Copy the code

Masking user selection

Disables users from selecting text or images on the page

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
Copy the code

Clear the shadow in the input box

On iOS, the input box has an internal shadow by default, which is closed like this:

div {
  -webkit-appearance: none;
}
Copy the code

How do I disable saving or copying images

The following code

img {
  -webkit-touch-callout: none;
}
Copy the code

Input box default font color

Set the color of the input font

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}
Copy the code

The user set the size to zoom in or out, causing a page layout error

Set font to disable zooming

body {
  -webkit-text-size-adjust: 100% ! important;
  text-size-adjust: 100% ! important;
  -moz-text-size-adjust: 100% ! important;
}
Copy the code

In Android, a border is created when an element is clicked

On some Android systems, clicking on a link brings up a border or a translucent gray mask, which varies depending on the manufacturer. The removal code is as follows

a.button.input.textarea{
  -webkit-tap-highlight-color: rgba(0.0.0.0)
  -webkit-user-modify:read-write-plaintext-only; 
}
Copy the code

IOS swiping is not smooth

Swiping up and down a page on aN ios phone will cause a lag. When your finger leaves the page, the page stops moving. The overall performance is not smooth sliding, no sliding inertia. In iOS 5.0 and later, swipes are defined to have two values: auto and touch, with the default value being Auto.

The solution

1. Add the scroll touch method to the scroll container

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

2. Set overflow Set external overflow to hidden and content element overflow to auto. If an internal element exceeds the body, it will be rolled, and the exceeded part of the body will be hidden.

body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}
Copy the code

Js article

The mobile click screen produces a delayed response of 200-300 ms

Web pages on mobile devices have 300ms delay, which often causes button click delay or even click invalidity. Solution:

• Fastclick solves the 300ms delay of a click event on a mobile phone
• Zepto’s Touch module, the tap event is also designed to solve the latency problem in click

The response sequence of touch events

1. ontouchstart
2. ontouchmove
3. ontouchend
4. onclick

Audio and video play automatically on ios and Android

This is not a bug, because auto-playing audio or video from a web page can cause trouble or unnecessary traffic consumption, so Apple and Android systems generally prohibit auto-playing and JS trigger play, must be triggered by the user to play. Add code that automatically triggers playback

$('html').one('touchstart'.function() {
  audio.play()
})
Copy the code

On iOS, when you pull down the border, you get blank space

Hold your finger on the screen and pull it down, creating an extra white area at the top of the screen. Hold your finger on the screen and pull, creating an extra white area at the bottom.

In iOS, dragging your finger up and down on the screen triggers the TouchMove event. The object triggered by this event is the entire WebView container, and the container will naturally be dragged, leaving the rest blank.

The solution

document.body.addEventListener(
  'touchmove'.function(e) {
    if (e._isScroller) return
    // Prevent default events
    e.preventDefault()
  },
  {
    passive: false})Copy the code

Ios date conversion NAN problem

Replace the date string format symbol with ‘/’

'yyyy-MM-dd'.replace(/-/g.'/')
Copy the code

Soft keyboard problem

The IOS keyboard pops up and blocks the original view

• It can be activated by listening to the mobile soft keyboard

Element. ScrollIntoViewIfNeeded (Boolean) method is used to Element not in the visible region of the browser window to scroll to the visible region of the browser window. If the element is already in the visible area of the browser window, no scrolling will occur.

• True, the element will be centered and aligned within the visible area of the scroll in which it is located.
• False, the element is aligned to the nearest edge of the visible area of its scroll area. Depending on which edge the visible region is closest to the element, the top of the element will be aligned with the top edge of the visible region, or the bottom edge of the element will be aligned with the bottom edge of the visible region.

window.addEventListener('resize'.function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)}else {
        document.activeElement.scrollIntoViewIfNeeded(false)}},0)}})Copy the code

Compatibility between onkeyUp and onKeydown is abnormal

In IOS, the support for keyup, keyDown, and other input keyboard events is not very good. Listening for keyup events with input is ok in Android mobile browser. However, keyUp events are not immediately corresponding to input methods in IOS mobile browser

IOS12 input box is hard to click to get focus, don’t play the soft keyboard

Fastclick.js is compatible with IOS12. You can make the following changes in the fastclick.js source code or main.js

FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf('date')! = =0&& targetElement.type ! = ='time'&& targetElement.type ! = ='month'
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}
Copy the code

When the IOS keyboard is retracted, the page does not fall back, leaving the bottom blank

Scroll back to the original position by listening to the keyboard

window.addEventListener('focusout'.function() {
  window.scrollTo(0.0)})// The input box pops up the solution to the soft keyboard.
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })
Copy the code

The reason why fixed fails in IOS

When the soft keyboard is aroused, the fixed element of the page will become invalid and become absolute, so when the page is more than one screen and scrolling, the fixed element will follow the scrolling. This is not limited to type=text input fields. Any soft keyboard (such as time and date selection, SELECT selection, etc.) that is evoked will have the same problem.

Solution: don’t let the page scroll, but let the body scroll by itself, set the body height to 100%, overflow:scroll

<body>
  <div class='warper'>
    <div class='main'></div>
  <div>
  <div class="fix-bottom"></div>
</body>
Copy the code

.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* Fix the ios slider problem */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}
Copy the code

Recommend the article