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

前言

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

移動(dòng)端常見問(wèn)題

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

原因是

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

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

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

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

解決方案:

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

2.前端手動(dòng)更改-變?yōu)? 

ios觸發(fā)input file

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

**解決方案: **

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

ios上拍照?qǐng)D片會(huì)旋轉(zhuǎn)

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

解決方案:

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

移動(dòng)端雙擊瀏覽器會(huì)縮放

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

虛擬鍵盤的高度

我們?cè)谟袝r(shí)做移動(dòng)端的時(shí)候會(huì)有訪問(wèn)虛擬鍵盤高度的需求，恰巧安卓與IOS表現(xiàn)行為不一致

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

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

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

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

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

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

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

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

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

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

小結(jié)

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

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

3.在android中，鍵盤喚起后，fixed元素的基準(zhǔn)會(huì)發(fā)生變化:根據(jù)bottom定位的元素，其基線變?yōu)殒I盤上部；根據(jù)top定位的元素，仍然根據(jù)頁(yè)面頂部，因此為照顧正常文檔流及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下沒(méi)有scrollHeight的屬性，導(dǎo)致無(wú)法計(jì)算虛擬鍵盤高度
 但是在ios13版本以上有個(gè)visualViewport
 window.visualViewport.addEventListener('resize', function() {
  window.visualViewport.height
  // 鍵盤高度
})