[h5]解決華爲x5瀏覽器底部欄兼容問題

現狀

產品需求是作一個帶底部吸底支付的支付頁面，以下圖所示：

可是在部分（大多數）華爲系統原生瀏覽器上會顯示以下：

下拉頁面，就會發現，是由於華爲瀏覽器下方的工具欄，遮住了支付組件，形成了這個樣式兼容問題。
也就是說，在華爲瀏覽器中下方工具條的高度不算在瀏覽器自身bom高度上，而是算網頁dom的一部分。更通俗地理解能夠爲，它就是個z-index：無限高;position:fixed;bottom:0的<div/>，坑啊！

---

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

1.有沒有那麼一種設置，可讓這個瀏覽器組件像ios或vivo oppo等其它手機的瀏覽器同樣正常算在其自身高度內？ 經百度，並無。可是有個x5內核強制「開啓全屏」的meta設置：

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

相對應的，還有個親測也是能夠的：

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

原本很開心地看到頁面完美地如期展示。可是幾番操做，發現這種方法不穩定，主要有兩個問題：

• 全屏模式下，x5瀏覽器會自動開啓一個懸浮按鈕，來進行「全屏-非全屏」狀態的切換。這個是設計圖以外的東西，在必定程度上對設計圖的實現形成了破壞，且會給用戶帶來迷茫感。
• 全屏模式的保持並不穩定。在某些路由跳轉時刻、某些佈局下，會退出全屏模式，沒有根治樣式兼容性缺陷。好比上圖中的支付頁面的確樣式正常了，可是點擊支付跳轉到「選擇支付方式」頁面時，就不知因此地退出了全屏模式，下方「當即支付」按鈕，又被遮住了。

2.處理交互障礙。也就是說，這個缺陷帶來的問題是，用戶在第一屏看不到支付渠道，且沒法經過下拉顯示（由於它不是不存在，而是被一個更高層的div蓋住了），那麼咱們就把支付組件的padding-bottom增高：

.pay-btn-container{
  padding-bottom: 95px; // 由於95px是後面講到的，在移動瀏覽器中實際算出的
                        // 距離差，因此不須要換算爲rem，直接使用便可。
}

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

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

可是這樣帶來的問題是，用戶如今確實能夠經過下拉頁面，最終看到支付按鈕了。但依舊不是在一屏之內。這種改進方式和產品、設計的初始預期出入較大，很容易被否掉，後期仍是要改。
且做爲一名有良好「產品感」的前端攻城獅，自己應該也很難接受這種調整方案。

3.將非全屏模式下，底部工具欄佔用的空間減掉，做爲下方支付組件的bottom值。就是算出在「全屏和非全屏模式」下，因爲底部虛擬工具欄的出現，而形成瀏覽器視窗的高度差。將其做爲底部支付組件距離下的距離值便可。這種解決方式主要有一點須要考慮：改虛擬工具欄，在多臺設備上的高度是否統一。若不統一，那麼此方法不可行，更難受的是，那麼就面臨着此題無解的尷尬局面。因而我找測試人員借來4臺華爲設備，經過計算髮現高度幾乎徹底一致（長吁一口粗氣），其值大概是95px，那麼咱們經過ua斷定是否爲x5內核，若是是x5內核下，則支付組件的style爲：

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

綜合考慮三種方式，最終選擇最後一種方式，他相對第一種比較穩定，相對第二種對交互侵入性最小，是目前最適合的答案。 可是由於x5內核並無給出一個方法獲取虛擬工具欄的實際高度，且發現其在多臺設備上高度確有2px的差距，因此這點也算是隱患。

最後想說，x5真的巨坑，不虧其「移動端IE6」的大名。騰訊在加入一些安全措施的同時，將原本很好用的webkit改得一團亂麻，嚴重影響它的可用性。說得不償失，一點不過度。最可恨的是，尚未徹底文檔，對開發者十分不友好。而那些將本身系統瀏覽器套用x5內核的「拿來者」也是開發者不友好團隊的簇擁。拋開AGZY情懷不談，我始終沒法相信這樣一家公司能顛覆什麼人類通訊技術的難關。

最後附上一個x5內核坑彙總的連接，但願有用：《QQ瀏覽器X5內核問題彙總》，若有問題歡迎留言。