總結移動端 H5 開發的 20 常用技巧（乾貨滿滿哦！）

前言

年後第一天到公司上班，整理一些在移動端H5開發常見的問題給大家做下分享，這裏很多是自己在開發過程中遇到的大坑或者遭到過吐糟的問題，希望能給大家帶來或多或少的幫助，喜歡的大佬們可以給個小贊，如果有問題也可以一起討論下。

html 篇

常用的meta屬性設置

meta對於移動端的一些特殊屬性，可根據需要自行設置


<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋轉
<meta name="full-screen" content="yes">             //全屏顯示
<meta name="browsermode" content="application">     //UC應用模式，使用了application這種應用模式後，頁面講默認全屏，禁止長按菜單，禁止收拾，標準排版，以及強制圖片顯示。
<meta name="x5-orientation" content="portrait">     //QQ強制豎屏
<meta name="x5-fullscreen" content="true">          //QQ強制全屏
<meta name="x5-page-mode" content="app">            //QQ應用模式

電話號碼識別

在 iOS Safari （其他瀏覽器和 Android 均不會）上會對那些看起來像是電話號碼的數字處理爲電話鏈接，比如：

7 位數字，形如：1234567
帶括號及加號的數字，形如：(+86)123456789
雙連接線的數字，形如：00-00-00111
11 位數字，形如：13800138000

關閉識別

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

開啓識別

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

郵箱識別（Android）

安卓上會對符合郵箱格式的字符串進行識別，我們可以通過如下的 meta 來識別郵箱的自動識別：

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

同樣地，我們也可以通過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：

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

css 篇

0.5px細線

移動端 H5 項目越來越多，設計師對於 UI 的要求也越來越高，比如 1px 的邊框。在高清屏下，移動端的 1px 會很粗。

那麼爲什麼會產生這個問題呢？主要是跟一個東西有關，DPR(devicePixelRatio) 設備像素比，它是默認縮放爲 100%的情況下，設備像素和 CSS 像素的比值。目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏來說，設備的物理像素要實現 1 像素，而 DPR=2，所以 css 像素只能是 0.5。

下面介紹最常用的方法

/* 底邊框 */
.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;
  }
}

屏蔽用戶選擇

禁止用戶選擇頁面中的文字或者圖片

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

清除輸入框內陰影

在 iOS 上，輸入框默認有內部陰影,以這樣關閉：

div {
  -webkit-appearance: none;
}

如何禁止保存或拷貝圖像

代碼如下

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

輸入框默認字體顏色

設置 input 裏面 placeholder 字體的顏色

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

用戶設置字號放大或者縮小導致頁面佈局錯誤

設置字體禁止縮放

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

android系統中元素被點擊時產生邊框

部分android系統點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣。去除代碼如下

a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

iOS 滑動不流暢

ios 手機上下滑動頁面會產生卡頓，手指離開頁面，頁面立即停止運動。整體表現就是滑動不流暢，沒有滑動慣性。 iOS 5.0 以及之後的版本，滑動有定義有兩個值 auto 和 touch，默認值爲 auto。

解決方案

在滾動容器上增加滾動 touch 方法

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

設置 overflow 設置外部 overflow 爲 hidden,設置內容元素 overflow 爲 auto。內部元素超出 body 即產生滾動，超出的部分 body 隱藏。

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

js 篇

移動端click屏幕產生200-300 ms的延遲響應

移動設備上的web網頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效。解決方案：

fastclick可以解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題

觸摸事件的響應順序

ontouchstart
ontouchmove
ontouchend
onclick

audio 和 video 在 ios 和 andriod 中自動播放

這個不是bug，由於自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發纔可以播放。加入自動觸發播放的代碼

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

iOS 上拉邊界下拉出現空白

手指按住屏幕下拉，屏幕頂部會多出一塊白色區域。手指按住屏幕上拉，底部多出一塊白色區域。

在 iOS 中，手指按住屏幕上下拖動，會觸發 touchmove 事件。這個事件觸發的對象是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白。

解決方案

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默認事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

ios 日期轉換 NAN 的問題

將日期字符串的格式符號替換成'/'

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

軟鍵盤問題

IOS 鍵盤彈起擋住原來的視圖

可以通過監聽移動端軟鍵盤彈起 Element.scrollIntoViewIfNeeded（Boolean）方法用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。如果該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動。
true，則元素將在其所在滾動區的可視區域中居中對齊。
false，則元素將與其所在滾動區的可視區域最近的邊緣對齊。根據可見區域最靠近元素的哪個邊緣，元素的頂部將與可見區域的頂部邊緣對準，或者元素的底部邊緣將與可見區域的底部邊緣對準。

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 和 onKeydown 兼容性問題

IOS 中 input 鍵盤事件 keyup、keydown、等支持不是很好, 用 input 監聽鍵盤 keyup 事件，在安卓手機瀏覽器中沒有問題，但是在 ios 手機瀏覽器中用輸入法輸入之後，並未立刻相應 keyup 事件

IOS12 輸入框難以點擊獲取焦點，彈不出軟鍵盤

定位找到問題是 fastclick.js 對 IOS12 的兼容性，可在 fastclick.js 源碼或者 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 鍵盤收起時頁面沒用回落，底部會留白

通過監聽鍵盤迴落時間滾動到原來的位置

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

//input輸入框彈起軟鍵盤的解決方案。
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);
  })

IOS 下 fixed 失效的原因

軟鍵盤喚起後，頁面的 fixed 元素將失效，變成了 absolute，所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。不僅限於 type=text 的輸入框，凡是軟鍵盤（比如時間日期選擇、select 選擇等等）被喚起，都會遇到同樣地問題。

解決方法: 不讓頁面滾動，而是讓主體部分自己滾動,主體部分高度設爲 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; /* 解決ios滑動不流暢問題 */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

推薦閱讀

前端工程師的 2020 年終總結-乾坤未定，你我皆黑馬
前端工程師的 2019 年終總結-當勤精進，但念無常
2018 年，我的本命年

本文分享自微信公衆號 - 全棧修煉（QuanZhanXiuLian）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。