Summarize the mobile H5 development common skills (dry goods full of oh!)

 Part html

 Commonly used meta attribute settings

Some special properties of meta for mobile, you can set them yourself according to your needs

<meta name="screen-orientation" content="portrait"> 
<meta name="full-screen" content="yes">            
<meta name="browsermode" content="application">    
<meta name="x5-orientation" content="portrait">     
<meta name="x5-fullscreen" content="true">         
<meta name="x5-page-mode" content="app">            

 telephone number recognition

On iOS Safari (other browsers and Android don’t) will treat numbers that look like phone numbers as phone links, for example:

•  7 digits, e.g. 1234567
• 
  Numbers with brackets and plus signs, e.g. (+86)123456789
•  Numbers of double connecting lines, e.g. 00-00-00111
•  11 digits, e.g. 13800138000

 Disable Recognition

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

 Turn on the recognition

<a href="tel:123456">123456</a>

 Mailbox Recognition (Android)

Android will recognize strings that match the format of the mailbox, we can use the following meta to manage the automatic recognition of the mailbox:

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

Similarly, we can enable the feature of pop-up email delivery by long-pressing on an email address through the label attribute:

<a mailto:dooyoe@gmail.com">xyftx2023@gmail.com</a>

 css Part

 0.5px fine line

There are more and more mobile H5 projects, and designers have higher and higher requirements for UI, such as 1px border. In HD screen, 1px on mobile will be very thick.

So why does this problem arise? It’s mainly related to one thing, DPR(devicePixelRatio), which is the ratio of device pixels to CSS pixels when scaled to 100% by default. Currently the mainstream screen DPR = 2 (iPhone 8), or 3 (iPhone 8 Plus). For a 2x screen, the physical pixels of the device should be 1 pixel, and DPR=2, so the css pixel can only be 0.5.

 The most common methods are described below

.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;
}
.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;
}
.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;
}
.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;
}

.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;
  }
}

 Masking User Selection

 Prohibit 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;
}

 Clear the shadow in the input box

On iOS, input boxes have internal shadows by default, so close them like this:

div {
  -webkit-appearance: none;
}

 How to disable saving or copying images

 The code is as follows

img {
  -webkit-touch-callout: none;
}

 Default font color for input box

Set the color of the placeholder font inside the input

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;
}

 Users set font size to zoom in or out resulting in page layout errors

 Setting the font to disable scaling

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

 Generate border when element is clicked in android

Some android systems will show a border or translucent gray mask when you click on a link, different producers define the effect differently. 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; 
}

 iOS Sliding is not smooth

The ios cell phone slides up and down the page will produce lag, the finger leaves the page, the page immediately stops moving. The overall performance is that the sliding is not smooth and there is no sliding inertia. In iOS 5.0 and later versions, there are two values for slide, auto and touch, and the default value is auto.

 prescription

1.  Add a scroll touch method to the scroll container.

.wrapper {
  -webkit-overflow-scrolling: touch;
}

2. 
   Set overflow set external overflow to hidden, set content element overflow to auto. internal element beyond body will generate scrolling, and the part of body beyond will be hidden.

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

 Part js

Mobile click screens produce 200-300 ms delayed response

Web pages on mobile devices are 300ms delayed, often resulting in delayed button clicks or even click failures. Solution:

• 
  fastclick solves the 300ms latency of click events on cell phones
• 
  zepto’s touch module, the tap event is also intended to solve the delay problem in the click

 Response sequence of touch events

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

audio and video autoplay in ios and andriod

This is not a bug, because auto-playing audio or video in webpage will bring some troubles or unnecessary traffic consumption to users, so Apple system and Android system usually prohibit auto-play and use JS to trigger play, it must be triggered by the user to be able to play. Add the code for auto-triggered playback

$('html').one('touchstart', function() {
  audio.play()
})

 iOS Border pull-ups appear blank when pulling down

Hold your finger on the screen to pull it down and an additional white area will appear at the top of the screen. Hold your finger on the screen and pull it up, an extra white area will appear at the bottom.

In iOS, holding your finger on the screen and dragging it up or down triggers the touchmove event. This event is triggered on the entire webview container, which is naturally dragged, leaving the rest of the container blank.

 prescription

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    e.preventDefault()
  },
  {
    passive: false
  }
)

Problems with ios date conversion NAN

 Replace the formatting symbols of date strings with ‘/’

'yyyy-MM-dd'.replace(/-/g, '/')

 Soft keyboard issues

 IOS Keyboard pops up to block original view

• 
  You can listen for the mobile soft keyboard to pop up by listening to the Element.scrollIntoViewIfNeeded (Boolean) method is used to scroll an element that is not in the visible area of the browser window to the visible area of the browser window. If the element is already in the visible area of the browser window, no scrolling occurs.
• 
  true, then the element will be centered in the visual area of the scrolling area where it is located.
• 
  false, then the element will be aligned with the closest edge of the visible area of the scroll area it is in. Depending on which edge of the visible area is closest to the element, the top of the element will be aligned with the top edge of the visible area, or the bottom edge of the element will be aligned with the bottom edge of the visible area.

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)
  }
})

onkeyUp and onKeydown compatibility issues

IOS input keyboard events keyup, keydown, etc. are not well supported, using input to listen to keyboard keyup events, no problem in Android mobile browsers, but in iOS mobile browsers with the input method after typing, did not immediately correspond to the keyup event

IOS12 Input box hard to click to get focus, can’t pop up soft keyboard

To locate the problem is the compatibility of fastclick.js 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()
  }
}

 IOS page doesn’t fall back when keyboard is retracted, white space is left at the bottom

 Scroll to original position by listening for keyboard fallback time

window.addEventListener('focusout', function() {
  window.scrollTo(0, 0)
})

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);
  })

Reasons for fixed failure on IOS

When the soft keyboard is evoked, the fixed element of the page will be invalidated and become absolute, so when the page is more than one screen long and scrolls, the invalidated fixed element will follow the scrolling. This is not limited to input boxes with type=text, but also to soft keyboards (e.g., time and date selection, select, etc.) that are invoked.

Solution: Instead of letting the page scroll, let the main part scroll, set the height of the main part to 100%, overflow:scroll

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

.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}