揮別web移動端開發差別和經典坑

web移動端

電話號碼識別差別

在 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>
複製代碼

輸入框內陰影差別

描述：在 iOS 上，輸入框默認有內部陰影，沒法使用 box-shadow 來清除 解決：

input,
textarea {
    /* 方法1: 去掉邊框 */
    border: 0;

    /* 方法2: 邊框色透明 */
    border-color: transparent;

    /* 方法3: 重置輸入框默認外觀 */
    -webkit-appearance: none;
    appearance: none;
}
複製代碼

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;
}
複製代碼

MDN定義： -webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果. auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會當即中止。 touch: 使用具備回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文。

移動端click屏幕產生200-300 ms的延遲,PC端無

問題描述：移動設備上的web網頁是有300ms延遲的，每每會形成按鈕點擊延遲甚至是點擊失效。 解決：

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

iOS上拉邊界下拉出現空白，安卓無

描述：手指按住屏幕下拉，屏幕頂部會多出一塊白色區域。手指按住屏幕上拉，底部多出一塊白色區域。安卓無此特性。

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

解決：

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

IOS日期格式轉換NAN問題

描述： iOS系統中JS轉換字符串變日期對象的時候，字符串格式必須是/相隔，一般狀況是-相隔，在微信小程序IOS環境中一樣出現出現此問題

iOS系統對js中的new Date()方法有格式要求

let dt = new Date("2019-07-24 19:57") //錯誤寫法
// dt會返回valid Date

let dt = new Date("2019/07/24 19:57")  //正確寫法
複製代碼

解決： 'yyyy-MM-dd'.replace(/-/g, '/') 進行字符串匹配轉換

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

描述：ios就是當喚起鍵盤後，整個頁面會被鍵盤壓縮，也就是說頁面的高度變小，而且全部的 fixed 所有變爲了 absolute ,而 android 中喚起鍵盤是覆蓋在頁面上，不會壓縮頁面

能夠經過監聽移動端軟鍵盤彈起 Element.scrollIntoViewIfNeeded（Boolean）方法用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。 若是該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動。

關於Element.scrollIntoView()的MDN連接 關於Element.scrollIntoViewIfNeeded()的MDN連接

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兼容差別

用 input 監聽鍵盤 keyup、keydown事件，在安卓手機瀏覽器中沒有問題，可是在 ios 手機瀏覽器中用輸入法輸入以後，並未馬上相應 keyup、keydown 事件

非直接的文字輸入(中文輸入法)下，進行判斷限制，僅在選詞後觸發input事件

描述：在使用oninput監控輸入框內容變化時，咱們指望僅在value值變化時，才觸發oninput事件，而在中文輸入下，未選詞時的按鍵也會觸發oninput事件。

關鍵解決：composition event

• compositonstart: 在IME的文本複合系統打開時觸發，表示要開始輸入例如(輸入法出現的那一刻)
• compositionupdate: 在向輸入字段中插入新字符時觸發（使用輸入法輸入的過程當中）
• compositionend: 在輸入法編輯器的文本複合系統關閉時觸發，表示返回正常鍵盤輸入狀態(選中文字，輸入法消失的那一刻)

判斷限制：

$('#input').on('compositionend', function(e) {
        var len = $(this).val().length;
        if (len > 16) {
            // 提示超過16字
        }
    });
複製代碼

選詞後觸發input事件:

var typing = false;
$('#ipt').on('compositionstart',function(){
    typing = true;
})
$('#ipt').on('compositionend',function(){
    typing = false;
})
//oninput在oncompositionend以前執行，需加定時器
$('#ipt').on('input',function(){
    setTimeout(function() {
        if(!typing) {
            //To do something...
        }
    },0);
})
複製代碼

微信小程序

webp格式IOS不支持

描述：在小程序內部，IOS不支持webp格式，安卓支持； 時間：201908

setData設置KB數有誤

描述：雖然官方文檔說 setData 設置數據的時候不能超過1024KB，小程序在IOS下單次設置的數據不能超過1024kB ，設置會有問題，安卓沒問題； 時間：201908

IOS系統微信版本兼容

描述： IOS8系統 只能 兼容最高微信版本 6.72 ，IOS系統9 能夠兼容微信版本7.0.0 以上。

wx.onSocket斷後再次發送連接IOS和安卓差別

描述：小程序 wx.onSocket 連接 在手動斷網後，IOS會不停發送請求再連接onSocketOpen，安卓不會 ，解決方法，作一個定時器啓動連接 時間：201908

部分安卓機器點擊鍵盤發送相同內容

描述：部分安卓機，如oppo 快速點擊鍵盤發送，會發出2條同樣的內容，防抖與節流均不生效； 時間：201907

微信公衆號

安卓在微信受權回調帶#的URL跳轉會出現空白

描述：安卓手機，在微信受權回調的函數中進行跳轉至的URL不能帶有#,但#號可放置在結尾。如： www.xuejiehome.com/#/home，跳轉至微…

如：www.xuejiehome.com/#/home ，跳轉至微信受權後，回調接口再次跳轉至http://www.xuejiehome.com/#/home?arg=test，即在地址最後增長一個參數，微信中顯示空白。

如：www.xuejiehome.com/#/home 跳轉至微信受權後，回調接口再次跳轉至http://www.xuejiehome.com/?arg=test#home 即在#home前增長一個參數，頁面跳轉正常。

經排查，緣由以下： 原來是緩存致使的，因其#號後的參數等都被忽略，那麼#之前的URL在受權前和受權後一致，其再也不發送網頁請求去從新獲取而是直接讀取緩存。

解決方法： 刷新須要跳轉到的URL，可以使用PHP的Header跳轉，默認header是不刷新的。 header("Refresh: 0; url={$go}"); 或者還能夠輸出js腳本跳轉：

echo "<script>window.location.href='{$go}'</script>";
複製代碼

累積中,上文存在錯誤狀況請指正

參考：

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