H5頁面常見開發問題總結

摘要

常見的通用的h5開發問題

ios端-h5開發問題

· 輸入法隱藏頁面留白

問題現象：ios端軟鍵盤失去焦點（隱藏）後，頁面不會回彈，頁面下方會留下輸入法塊的白色塊。

暴力解決方案：軟鍵盤收起（隱藏）後，滾動一下頁面，頁面中的留白塊塊就會消失。所以只要在輸入完畢後實現一下『滾動』的操作就可以解決問題。

react(react hook)暴力開發解決方案：（**實現部分）

//
輸入鍵盤隱藏回彈
useeffect(() =>
})},)

*注：這個ios軟鍵盤收起留白解決方案適應性不全（只適合表單中僅有乙個input輸入框且為單頁面），表單中擁有多個input輸入框時，切換input時也會觸發scrollto方法,造成input回彈閃爍異常問題。react(react hook)終極開發解決方案：（**實現部分）

useeffect(() => , 100);

}

// 載入元件新增事件監聽

document.body.addeventlistener('focusout', () => );

// 解除安裝元件清除事件監聽

return () => );

}

},)

·長按***無法識別

react開發解決方案：（**實現部分）

html部分：

import obbymd from '@/assets/images/obby-majordomo.png';

"
obby-qrcode
">
"code-img-2
">
obbymd-code
" alt="
***"/>
code
"  style=} alt="
透明***
"/>  "
obby-md-text
">聯絡小管家

css公共部分：

@mixin qrcode

.obby-qrcode 
&.code 
}.obby-md-text 
}

解決方案：經過測試，***元件頁面識別沒有問題，由上一級路由跳轉過來***元件就會復現無法識別問題；路由跳轉方式用的react-router的history.push方式，更換跳轉方式為window.location.href = "跳轉路由"即可解決。

·ios只載入首屏資訊

問題現象：掃碼進入h5頁面（可滾動頁面），頁面首屏存在資源資訊，當頁面滾動後，頁面資訊無法載入。具體問題現象如下圖所示：

解決方案：汲取網上的開發經驗發現，在h5滾動容器的樣式裡加了乙個overflow：hidden，去掉該樣式屬性就解決問題。

android端-h5開發問題

·video層級問題

react開發解決方案：（**實現部分）

id="
player
"controls=
width="
100%
"height="
100%
"x5-video-player-type="
h5-page"//
x5-video-orientation="
landscape|portrait"//
>
"video/mp4
" />

css樣式**：

video