現狀
產品需求是做一個帶底部吸底支付的支付頁面，如下圖所示：
但是在部分（大多數）華爲系統原生瀏覽器上會顯示如下：
下拉頁面，就會發現，是因爲華爲瀏覽器下方的工具欄，遮住了支付組件，造成了這個樣式兼容問題。
也就是說，在華爲瀏覽器中下方工具條的高度不算在瀏覽器自身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，那麼我們修改支付組件：
.pay-btn-container{
position: fixed;
bottom: 95px;
}綜合考慮三種方式，最終選擇最後一種方式，他相對第一種比較穩定，相對第二種對交互侵入性最小，是目前最適合的答案。 但是因爲x5內核並沒有給出一個方法獲取虛擬工具欄的實際高度，且發現其在多臺設備上高度確有2px的差距，所以這點也算是隱患。
最後想說，x5真的巨坑，比u4還坑，不虧其“移動端IE6”的大名。騰訊在加入一些安全措施的同時，將本來很好用的webkit改得一團亂麻，嚴重影響它的可用性。最可恨的是，還沒有完全文檔，對開發者十分不友好。而那些將自己系統瀏覽器套用x5內核的“拿來者”也是不友好團隊的簇擁。
最後附上一個x5內核坑彙總的鏈接，希望有用：《QQ瀏覽器X5內核問題彙總》，如有問題歡迎留言。