我們之前開發(fā)的H5網頁，有客戶反饋頁面底部被瀏覽器下方的工具欄遮住了，經過測試發(fā)現目前只有華為原生x5瀏覽器底部欄出現這個兼容問題，它遮住了底部頁面，造成了這個樣式兼容問題。

可以看出：在華為瀏覽器中下方工具條的高度不算在瀏覽器自身bom高度上，而是算網頁dom的一部分。更通俗地理解可以為，它就是個z-index：無限高;position:fixed;bottom:0的<div/>。

那么隨之而來的幾種解決思路是：

1、x5內核強制“開啟全屏”

有沒有那么一種設置，可以讓這個瀏覽器組件像ios或vivo oppo等其它手機的瀏覽器一樣正常算在其自身高度內？經百度，并沒有。但是，有個x5內核強制“開啟全屏”的meta設置：

// 開啟x5內核瀏覽器的全屏模式
<meta name="x5-fullscreen" content="true">

相對應的，還有個親測也是可以的：

// 據稱是uc瀏覽器開始全屏模式，但是我在x5內核中測試也是可以的
<meta name=”full-screen” content=”yes”>

本來很開心地看到頁面完美地如期展現。但是幾番操作，發(fā)現這種方法不穩(wěn)定，主要有兩個問題：

• 全屏模式下，x5瀏覽器會自動開啟一個懸浮按鈕，來進行“全屏-非全屏”狀態(tài)的切換。這個是設計圖之外的東西，在一定程度上對設計圖的實現造成了破壞，且會給用戶帶來迷茫感。
• 全屏模式的保持并不穩(wěn)定。在某些路由跳轉時刻、某些布局下，會退出全屏模式，沒有根治樣式兼容性缺陷。

2、處理交互障礙

也就是說，這個缺陷帶來的問題是，用戶看不到底部內容，且無法通過下拉顯示（因為它不是不存在，而是被一個更高層的div蓋住了），那么我們就把底部內容的padding-bottom增高：

.footer{
  padding-bottom: 95px; // 因為95px是后面講到的，在移動瀏覽器中實際算出的距離差，所以不需要換算為rem，直接使用即可。
}

撐起下部被遮擋部分；或者將document的height增高，同樣達到撐起被遮擋部分的作用。

document,.root{
  height: calc(100vh + 95px);
}

但是這樣帶來的問題是，用戶現在確實可以通過下拉頁面，最終看到底部內容。但依舊不是在一屏以內。

這種改進方式和產品、設計的初始預期出入較大，很容易被否掉，后期還是要改。且作為一名有良好“產品感”的前端攻城獅，本身應該也很難接受這種調整方案。

3、將非全屏模式下，底部工具欄占用的空間減掉

就是算出在“全屏和非全屏模式”下，由于底部虛擬工具欄的出現，而造成

這種解決方式主要有一點需要考慮：改虛擬工具欄，在多臺設備上的高度是否統(tǒng)一。

若不統(tǒng)一，那么此方法不可行，更難受的是，那么就面臨著此題無解的尷尬局面。于是我找測試人員借來4臺華為設備，通過計算發(fā)現高度幾乎完全一致，其值大概是95px，那么我們通過ua判定是否為x5內核，如果是x5內核下，則設置底部組件的style為：

style={{
  position: `fixed`,
  width: `100%`,
  left: 0,
  bottom: navigator.userAgent.toLowerCase().includes(`qqbrowser`) ? `95px` : 0,
}}

綜合考慮三種方式，最終選擇最后一種方式，他相對第一種比較穩(wěn)定，相對第二種對交互侵入性最小，是目前最適合的答案。 

但是因為x5內核并沒有給出一個方法獲取虛擬工具欄的實際高度，且發(fā)現其在多臺設備上高度確有2px的差距，所以這點也算是隱患。