Summary of mobile H5 development tips.

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 summary of the recent month, for everyone to review the old.

I am making: github.com/Michael-lzg

HTML report

Common meta property Settings

Meta For some special attributes on mobile terminals, you can set them as required

<meta name="screen-orientation" content="portrait"<meta name= <meta name="full-screen" content="yes"<meta name= <meta name="browsermode" content="application"> //UC application mode. After using the application mode, the page will be full-screen by default, with no long press menu, no clean up, standard layout, and mandatory image display. <meta name="x5-orientation" content="portrait"< span style = "box-sizing: border-box! Important"x5-fullscreen" content="true"< span style = "box-sizing: border-box! Important"x5-page-mode" content="app"< span style = "max-width: 100%; clear: both; min-height: 1emCopy the code

Telephone number identification

On iOS Safari (other browsers and Android don’t), numbers that look like phone numbers are processed as phone links, such as:

• The value is a seven-digit number, for example, 1234567
• A number followed by a plus sign is in the form of :(+86)123456789
• The number of the double connection cable is in the format of 00-00-00111
• The value is an 11-digit number, for example, 13800138000

Close to identify

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

Open to identify

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

Mailbox Recognition (Android)

Android will recognize strings that match the format of the mailbox. We can use the following meta to control automatic mailbox recognition:

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

Similarly, we can also use the label attribute to enable the function of holding down the email address to pop up an email:

<a mailto:[email protected]">[email protected] Copy the codeCopy the code

CSS article

0.5 px thin lines

As more and more mobile H5 projects become available, designers are demanding more and more UI, such as 1px borders. In HD, 1px on mobile will be thick.

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

Here are the most common methods

/* border */.b-border {position: relative; } .b-border:before { content:' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;- its - transform: scaleY (0.5); The 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;- its - transform: scaleY (0.5); The 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;- its - transform: scaleX (0.5); The 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;- its - transform: scaleX (0.5); The transform: scaleX (0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* Four edges */.setBorderAll {position: relative; &:after { content:' '; position: absolute; top: 0; left: 0; width: 200%; height: 200%; The transform: scale (0.5); transform-origin: left top; box-sizing: border-box; border: 1px solid#e5e5e5;border-radius: 4px; }} Copy the codeCopy the code

Blocking user selection

Disables the user 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; } Duplicate codeCopy the code

Clear the shadow in the input box

On iOS, the input field has an internal shadow by default to close like this:

div { -webkit-appearance: none; } Duplicate codeCopy the code

How do I stop saving or copying images

The following code

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

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

A page layout error occurs when the user sets the size to be enlarged or reduced

Set font to disable zooming

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

The Android system creates a border when an element is clicked

On some Android systems, clicking on a link will create a border or translucent gray mask, which varies by manufacturer. The removal code is as follows

A, button, input, textarea {- its - tap - highlight - color: rgba (0,0,0,0) - its - user - the modify:read-write-plaintext-only; } Duplicate codeCopy the code

IOS doesn’t swipe smoothly

When you swipe up and down on an ios phone, the page will get stuck. When your finger leaves the page, the page will stop moving immediately. The overall performance is not smooth sliding, no sliding inertia. For iOS 5.0 and later, sliding is defined with two values auto and Touch. The default is Auto.

The solution

1. Added the scroll touch method to the scroll container

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

1. Set Overflow Sets external overflow to Hidden and content element overflow to Auto. The inner element beyond the body produces a scroll, and the part beyond the body is hidden.

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

Js article

The click screen on the mobile side generates a delayed response of 200-300 ms

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

• Fastclick solves the 300ms delay for click events on mobile phones
• Zepto’s Touch module, tap events are also designed to solve the lag problem at click

Response order of touch events

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

Audio and video automatically play on ios and Android

This is not a bug, because the automatic playing of audio or video in web pages will bring some confusion or unnecessary traffic consumption to users, so apple system and Android system usually prohibit automatic playing and JS trigger playing, which can only be triggered by users. Add automatic trigger play code

$('html').one('touchstart'.function() {audio-play ()}) copies the codeCopy the code

IOS pull-up boundary pull-down blank

Hold your finger on the screen and pull it down to create a white area at the top of the screen. Hold your finger on the screen and pull, creating a white area at the bottom.

In iOS, holding a finger and dragging it up and down triggers the TouchMove event. This event triggers the entire WebView container, which will naturally be dragged, leaving the rest blank.

The solution

document.body.addEventListener(
  'touchmove'.function(e) {
    if (e._isScroller) returnE.preventdefault ()}, {passive:false}) copy the codeCopy the code

Ios date conversion NAN issues

Replace the format symbol of the date string with a ‘/’

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

Soft keyboard problem

The IOS keyboard pops up and blocks the original view

• Can move the soft keyboard pop-up Element. By listening 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 occurs.
• True, the element is centered and aligned in the visible area of the scroll area in which it is located.
• False, the element is aligned with the nearest edge of the visible area of its scroll area. Depending on which edge of the visible region is closest to the element, the top of the element aligns with the top edge of the visible region, or the bottom edge of the element aligns 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 codeCopy the code

OnkeyUp is incompatible with onKeydown

Input keyboard events keyup, keyDown, and so on are not well supported in IOS. Using input to listen for keyboard keyup events is not a problem in Android mobile browser, but the corresponding keyup event is not immediately corresponding after input method is used in IOS mobile browser

IOS12 input box is hard to click to get focus, you can’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 ()}} copies the codeCopy the code

When the IOS keyboard is folded up, the page does not fall back, and the bottom will be blank

Scroll to the original position by listening for the keyboard to fall back

window.addEventListener('focusout'.function() {window.scrollto (0, 0)}) // Input input box pop-up soft keyboard solution. 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 codeCopy the code

Fixed failed in IOS. Procedure

When the soft keyboard is invoked, the fixed element on the page becomes absolute, so when the page is scrolling on more than one screen, the invalid fixed element will follow the scrolling. The same problem applies to any soft keyboard (such as date and time selection, select selection, etc.) that is invoked, not just for type=text fields.

Workaround: Instead of letting the page scroll, let the main section scroll by itself, set the height of the main section to 100%, overflow:scroll

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

.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%; } Duplicate codeCopy the code

Recommend the article

Concerned about my public number irregularly share front-end knowledge, progress with you!