小米全面屏手機瀏覽器的input、textarea吸底被遮擋

移動端作一個吸底的輸入框，首先須要注意兩大類設備，安卓和ios下的瀏覽器。特別是在ios下，輸入框聚焦時fixed定位會出現一些問題，網上也有許多相關的帖子，在此就再也不贅述了。
今天要說起的是小米全面屏下的miui瀏覽器。
問題描述：吸底的input聚焦後，彈出的軟鍵盤將吸底的元素徹底或者部分遮擋。
問題緣由：當input聚焦後，瀏覽器彈出軟鍵盤，而後將元素移動到軟鍵盤上方，但全面屏下，miui瀏覽器少計算了瀏覽器自帶的底部bar的高度。而後致使元素被軟鍵盤遮擋高度爲bar的高度。
解決方案：
1.獲取window.navigator.userAgent這一字段。
2.判斷是否含有"MiuiBrowser"這一字段。
3.判斷屏幕的寬高比，當高度大於寬度的2倍時肯定爲全面屏。
4.記錄一開始進入頁面時的高度：window.innerHeight。
5.當輸入框聚焦後，給輸入框加上等於瀏覽器底部物理bar高度的margin-bottom。而後能夠看到正常的輸入框了，並且不會被軟鍵盤遮擋。
6.軟鍵盤的高度變化會觸發瀏覽器的resize事件。第一次觸發底部輸入框聚焦時，記錄變化後的window.innerHeight。
7.因爲軟鍵盤有收回這種狀態，此時軟鍵盤依然存在，可是高度縮小，一樣會觸發resize，此時能夠用window.innerHeight與4中記錄的作比較，若是是小於等於4中的高度，並且大於5中記錄的高度，那麼能夠將輸入框的margin-bottom的增長值去掉，而且將輸入框blur。而後就不會露出很高的底部了。
以上。
建議：在移動端最好不要作吸底的輸入框，各個瀏覽器的實現差距很大。