1px at mobile end

Problem Description: 1px border. Under the HD screen, the 1px of the mobile terminal will be very thick.

Cause: first of all, we need to understand a concept: DPR (device pixel ratio), which is the ratio of device pixels to CSS logical pixels when the default zoom is 100%. At present, the mainstream screen DPR=2 or 3. PX set in CSS is a logical pixel, which causes 1px to become 2px or 3px of physical pixels, such as double screen. The physical pixel of the device needs to achieve 1 pixel, so the CSS logical pixel can only be 0.5px.

The most common methods are described below

Set height:1px through CSS: before selector or CSS: after selector, and zoom 0.5x at the same time.

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

/* 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 code

CSS animation page flash white, animation Caton

Problem Description: CSS animation page flashing white, animation Caton

Solution: 1. Use the synthetic attributes transform and opacity to design CSS3 animation as much as possible, and do not use the left and top of position to locate. 2. Turn on hardware acceleration

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
Copy code

Mask user selection

Prevent users from selecting text or pictures in 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 code

Clear shadows in input boxes

Problem Description: on iOS, the input box has internal shadow by default. Solution:

input {
  -webkit-appearance: none;
}
Copy code

Prohibit saving or copying images

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

Input box default font color setting

Set the color of placeholder font in 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;
}
Copy code

The user sets the font size to enlarge or reduce, resulting in page layout errors

Set font to prevent scaling

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

A border is generated when an element in the android system is clicked

Some android systems click a link and a border or translucent gray mask will appear. The amount defined by different manufacturers has different effects. 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 code

iOS sliding is not smooth

When the ios mobile phone slides up and down the page, it will cause a jam. When the finger leaves the page, the page will stop moving immediately. The overall performance is that the sliding is not smooth and there is no sliding inertia. For iOS 5.0 and later versions, sliding is defined with two values auto and touch, and the default value is auto.

• Solution 1. Add a rolling touch method on the rolling container

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

2. Set overflow, set external overflow to hidden, and set content element overflow to auto. When the internal element exceeds the body, it will roll, and the exceeding part of the body is hidden.

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

html article

Common meta property settings

For some special properties of the mobile terminal, meta can be set as needed

<meta content="telephone=no" name="format-detection" />  //Prohibit iOS from recognizing long numbers as phones
<meta name="screen-orientation" content="portrait">  //Android prohibits screen rotation
<meta content="email=no" name="format-detection" /> //Don't let Android phone recognize email
<meta name="format-detection" content="telephone=no" /> //Disable phone number identification
<meta name="full-screen" content="yes"> //Full screen display
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no" /> //H5 the page window automatically adjusts to the device width and prevents the user from scaling the page
<meta name="apple-mobile-web-app-capable" content="yes" />  //When the website is added to the quick start mode of the main screen, the address bar can be hidden. Only after Safari ios7.0 version of IOS, the effect can not be seen on safari 
Add website to home screen quick launch mode, only for ios of safari Style of the top status bar            
Copy code

a tag evokes native applications

Similarly, we can also enable the function of pop-up mail sending by long pressing the email address through the tag attribute:

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

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

js

Invalid for iPhone 7 to traverse array with for...in

Problem Description: when I first learned to use js, I thought that for...in traversal was simpler than for loop. Later, after user feedback, I found that iPhone7 does not support traversal of arrays with for...in

Solution: change to for loop traversal

300 ms delay of mobile terminal click event

Problem Description: mobile web pages have a delay of 300ms, which often causes button click delay or even click failure.

Solution:

• fastclick can solve the 300ms delay of clicking events on the mobile phone
• In the touch module of zepto.js, the tap event is also used to solve the delay problem in click

audio and video play automatically in ios and Android

stay Front end training During the learning process, in order to optimize the user experience, the teacher will also mention that Apple system and Android system usually prohibit automatic playback and JS trigger playback when the page is loaded. The playback can be triggered only when the user actively clicks the page. Trigger playback by adding touchstart to the root element of the page

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

iOS pull-up boundary drop-down appears blank

Problem Description: press and hold the screen drop-down with your finger, and a white area will appear at the top of the screen. Press and hold your finger on the screen and pull it up. There is an extra white area at the bottom.

Cause: in iOS, the touchmove event will be triggered when the finger is pressed and dragged up and down the screen. The object triggered by this event is the entire webview container. The container will be dragged naturally, and the rest will be blank.

Solution:

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

ios date conversion NAN problem

Replace the format symbol of the date string with '/'

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

Soft keyboard problem

When inputting English in the Chinese input method of iOS system, a one sixth space may appear between letters

Solution: it can be removed by regular

 this.value = this.value.replace(/\u2006/g, '');
Copy code

The IOS keyboard pops up to block the original view

Solution:

• You can pop up the Element.scrollIntoViewIfNeeded (Boolean) method by listening to the soft keyboard of the mobile terminal, which is used to scroll elements that are 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, scrolling does not occur.
• true, the element will be centered in the visible area of its scroll area.
• false, the element will be aligned with the nearest edge of the visible area of its scrolling area. 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)
  }
})
Copy code

onkeyUp and onKeydown compatibility issues

Input keyboard events keyup, keydown, etc. in ios are not well supported. There is no problem monitoring keyboard keyup events with input in Android mobile browser, but there is no corresponding keyup event immediately after input with input method in ios mobile browser

The IOS12 input box is difficult to click to obtain focus, and the soft keyboard cannot pop up

Locate and find the problem is the compatibility of fastclick.js with IOS12. You can make the following modifications 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 code

When the IOS keyboard is folded, the page is useless and falls back, and the bottom will be left blank

Scroll to the original position by monitoring the falling time of the keyboard

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

//The solution of pop-up soft keyboard in input box.
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 code

fixed failure under IOS

Problem Description: after the soft keyboard is aroused, the fixed element of the page will become invalid and become absolute. Therefore, when the page exceeds one screen and scrolls, the invalid fixed element will follow the scroll. It is not limited to the input box of type=text. All soft keyboards (such as time and date selection, select selection, etc.) will encounter the same problem. Solution: instead of scrolling the page, let the main part scroll by itself. 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>
Copy 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%;
}

Copy code