在寫一個一定段H5頁面的時候，中間有輸入框，底部有固定按鈕，在點(diǎn)擊輸入框時，你就會看到奇怪的事情，我固定在底部的fixed部分被輸入法頂起來了：
1.jpg
方法一:
動態(tài)監(jiān)控瀏覽器窗口的變化。當(dāng)瀏覽器窗口的大小發(fā)生變化時，如果變化后的窗口高度小于初始的窗口高度，則讓底部隱藏起來；反之，則讓底部分正常顯示，代碼展示：
var win_h = $(window).height();//關(guān)鍵代碼
window.addEventListener('resize', function () {
if($(window).height() < win_h){
$('.share-btn-box').hide();
}else{
$('.share-btn-box').show();
}
});
但是這個方法有個缺陷，在安卓手機(jī)中沒有任何問題，但是在蘋果手機(jī)中無法看到固定在底部的內(nèi)容，原因就是蘋果手機(jī)底部有自帶的工具欄，這個會影響JS對瀏覽器可視窗口高度的判斷，JS會認(rèn)為當(dāng)前可視窗口高度小于整個手機(jī)窗口的高度，就會將底部的內(nèi)容隱藏掉，和輸入法彈起時是一樣的效果，所以最后就是在蘋果手機(jī)中會看不到固定在底部的內(nèi)容。
方法二：
//navigator.userAgent.indexOf用來判斷瀏覽器類型
var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
if (isAndroid){//如果是安卓手機(jī)的瀏覽器
var win_h = $(window).height();//關(guān)鍵代碼
$("body").height(win_h);//關(guān)鍵代碼
window.addEventListener('resize', function () {
// Document 對象的activeElement 屬性返回文檔中當(dāng)前獲得焦點(diǎn)的元素。
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
if($('.share-btn-box').is(':visible')){
$('.share-btn-box').hide();
}else{
$('.share-btn-box').show();
}
}
});
}
效果圖如下：
2.jpg
第二種更加全面，所以肯定推薦第二種呀！
