解決iOS下input和fixed 問題

在ios下若是頁面底部有fixed 元素當有input輸入框觸發鍵盤時fixed會浮動在頁面出現展現老是

解決方法有不少種，可是要根據實際須要更改

方法1、css解決（弊端：當有大面積input元素時會出現滑動不暢問題）

//這裏給內容區域設置 position:absolute，而且設置一個距離fixed的底部距離

.main{

position:absolute; 

bottom:rem-calc(80px); //fixed元素的高度

top:0;

left:0;

width:100%;

}

方法2、js解決方法（弊端：每次input焦點事件時要執行一次）

.pos-rel {
position: relative;;
}

<script>

$(function() {
var isIOS = (/iphone|ipad/gi).test(navigator.appVersion);//判斷是否是ios系統

if (isIOS) {
$(‘.main’).on(‘focus’, ‘input’, function () {
$(‘.fixed-bottom’).addClass(‘pos-rel’);
}).on(‘focusout’, ‘input’, function () {
$(‘.fixed-bottom’).removeClass(‘pos-rel’);
});
}
});
</script>

固然還有其它的解決方法例如使用iscroll.js剛開始就用的這種解決方式，後來發如今input元素較多或是有click事件頁面引入iscroll.js會遇到各類坑不建議使用，固然也能夠把fixed設置成absolute每次頁面滾動變化時從新計算，這種方式也很是的消耗資源

綜合以上仍是以爲在帶有input元素的頁面儘可能避免fixed元素的使用