在 H5 頁面中，會發現在高版本的 IOS 系統中（ios12以上）和微信版本6.7.x以上，都會發現 input 等輸入框，輸入內容之后發現虛擬鍵盤消失，但是頁面出現大面積白框。
解決辦法（最后加上是否是微信瀏覽器）：
方法一：
document.addEventListener('focusout', () => {
setTimeout(() => {
let height = document.documentElement.scrollTop || document.body.scrollTop
window.scrollTo(0, height + 1)
window.scrollTo(0, height - 1)
}, 20)
})
方法二：
function changeBlue(){
let u = navigator.userAgent, app = navigator.appVersion;
let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))}, 200)
}}
安卓彈出的鍵盤遮蓋文本框
changeblue(){
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
if(isAndroid){
setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
document.activeElement.scrollIntoView();
}, 500);
}
}
Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。而Element.scrollIntoViewIfNeeded()方法也是用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。但如果該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動
IOS 中光標錯位或過長問題：
導致原因：input 設置了 line-height 或 fixed 導致。解決辦法去掉 line-height，設置 height 或使用 absolution
去掉 select 中默認下拉小箭頭
IE ： select::-ms-expand { display: none; } /*清除ie的默認選擇框樣式清除，隱藏下拉箭頭*/
chorme：
/*為下拉小箭頭留出一點位置，避免被文字覆蓋*/
padding-right:34px; padding-left: 10px;
/*將默認的select選擇框樣式清除*/
appearance:none; -moz-appearance:none; -webkit-appearance:none;
background: url("/assets/img/caret.png") no-repeat scroll right center transparent;