姿勢不對，起來學(xué)習(xí)，找尋屬于自己的領(lǐng)域賽道，深耕成為稀缺資源，做差異化競爭

前言

隨著移動互聯(lián)網(wǎng)的興起，漸漸的手機(jī)瀏覽器也爭先恐后的出世，PC瀏覽器獨(dú)占鰲頭的時(shí)代已經(jīng)過去，現(xiàn)在是多元化時(shí)代，由于移動端機(jī)型太多，導(dǎo)致前端在每個(gè)手機(jī)的表現(xiàn)形式不一致，下面針對一些常見的情況出一份文檔

移動端常見問題

我們有時(shí)候能看到ios在顯示時(shí)間的時(shí)候會顯示NaN, 而安卓機(jī)卻沒事

原因是

1.ios上的時(shí)間dataString必須滿足iso8601或者Rfc2822格式不然無法解析

iso8601:YYYY-MM-DDThh:mm:ss+00:00

而后端返回的可能數(shù)據(jù)不符合以上格式 

2. ios不支持YYYY-MM-DD格式

解決方案:

1.后端傳回符合格式時(shí)間格式

2.前端手動更改-變?yōu)? 

ios觸發(fā)input file

通過js喚起input file時(shí), ios:需要點(diǎn)擊兩下, android:只需要一下

**解決方案: **

ios需要連續(xù)觸發(fā)兩下click事件
input.click()
input.click() 

ios上拍照圖片會旋轉(zhuǎn)

IOS在拍照上傳圖片的時(shí)候，圖片會被翻轉(zhuǎn)90度

解決方案:

引入Exif.js根據(jù)當(dāng)前圖片旋轉(zhuǎn)角度來更改圖片角度 

移動端雙擊瀏覽器會縮放

<meta name="viewport" content="user-scalable=none, initial-scale=1.0"> 

虛擬鍵盤的高度

我們在有時(shí)做移動端的時(shí)候會有訪問虛擬鍵盤高度的需求，恰巧安卓與IOS表現(xiàn)行為不一致

鍵盤彈出的不同表現(xiàn)

IOS:IOS的鍵盤處在窗口的最上層，當(dāng)鍵盤彈起時(shí)，webview的高度height并沒有改變，只是 scrollTop發(fā)生變化，頁面可以滾動。且頁面可以滾動的最大限度為彈出的鍵盤的高度，而只有鍵盤彈出時(shí)頁面恰好也滾動到最底部時(shí)，scrollTop的變化值為鍵盤的高度，其他情況下則無法獲取。這就導(dǎo)致在IOS情況下難以獲取鍵盤的真實(shí)高度。

Android:webview中留出空間，該空間小于等于的鍵盤空間，變化的高度差會隨著布局而不同，有的認(rèn)為鍵盤高度+頁面高度=原頁面高度:是錯(cuò)誤的誤導(dǎo)，只有在某種很巧合的布局情況下才可套用此公式。

鍵盤收起的不同表現(xiàn)

IOS:觸發(fā)鍵盤上的按鈕收起鍵盤或者輸入框以外的頁面區(qū)域時(shí)，輸入框會失去焦點(diǎn)，因此會觸發(fā)輸入框的blur事件。 Android:觸發(fā)鍵盤上的按鈕收起鍵盤時(shí)，輸入框并不會失去焦點(diǎn)，因此不會觸發(fā)頁面的blur事件；觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框會失去焦點(diǎn)，觸發(fā)輸入框的 blur事件。

監(jiān)聽鍵盤的彈出與收起

在h5中目前沒有接口可以直接監(jiān)聽鍵盤事件，但我們可以通過分析鍵盤彈出、收起的觸發(fā)過程及表現(xiàn)形式，來判斷鍵盤是彈出還是收起的狀態(tài)。

鍵盤彈出：輸入框獲取焦點(diǎn)時(shí)會自動觸發(fā)鍵盤的彈起動作，因此，我們可以監(jiān)聽輸入框的focus事件，在里面實(shí)現(xiàn)鍵盤彈出后所需的頁面邏輯。這在ios及android中表現(xiàn)一致。

鍵盤收起：從第2部分可知，觸發(fā)鍵盤收起的不同形式會存在差異化表現(xiàn)，當(dāng)觸發(fā)其他頁面區(qū)域收起鍵盤時(shí)，我們可以監(jiān)聽輸入框的blur事件，在里面實(shí)現(xiàn)鍵盤收起后所需的頁面邏輯。而在通過鍵盤按鈕收起鍵盤時(shí)在ios與android端存在差異化表現(xiàn)，下面具體分析：

IOS:觸發(fā)了輸入框blur事件，仍然通過該辦法監(jiān)聽。 Android:沒有觸發(fā)輸入框的blur事件。但通過第1、2部分我們可以知道，在android中，鍵盤的狀態(tài)切換（彈出、收起）不僅和輸入框關(guān)聯(lián),同時(shí)還會影響到webview高度的變化，那我們不妨通過監(jiān)聽webview height(window.onresize事件)的變化來判斷鍵盤是否收起

小結(jié)

1.在ios中,無論何種布局，為了使輸入框展示在可視區(qū)域中，鍵盤彈出時(shí)，頁面會向上滾動，該過程與Element.scrollIntoViewIfNeeded()方法（將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動到瀏覽器窗口的可見區(qū)域）產(chǎn)生的效果一致；且高度始終不變，頁面可滾動。

2.在android中，鍵盤喚起后，頁面可滾動與否由其處在正常文檔流中的元素決定：如果正常文檔流中的元素可全量展示，頁面不可滾動，否則頁面支持滾動；（如果正常文檔流的元素所占的可見區(qū)域超過一屏幕可以滾動）

3.在android中，鍵盤喚起后，fixed元素的基準(zhǔn)會發(fā)生變化:根據(jù)bottom定位的元素，其基線變?yōu)殒I盤上部；根據(jù)top定位的元素，仍然根據(jù)頁面頂部，因此為照顧正常文檔流及fixed元素的用戶體驗(yàn)，有的元素可根據(jù)頂部定位，有的可以根據(jù)底部定位。

解決方案

android:
 1.獲取鍵盤彈起前的documentElement的clientHeight
 2.監(jiān)聽window.resize時(shí)間或者input的focus事件
 3.在執(zhí)行第一步
 4.兩者相減就是虛擬鍵盤高度


ios:
 ios比較復(fù)雜，因?yàn)樗兊檬莝crollTop，而window下沒有scrollHeight的屬性，導(dǎo)致無法計(jì)算虛擬鍵盤高度
 但是在ios13版本以上有個(gè)visualViewport
 window.visualViewport.addEventListener('resize', function() {
  window.visualViewport.height
  // 鍵盤高度
})