在寫一個一定段H5頁面的時候扳埂，中間有輸入框业簿，底部有固定按鈕，在點擊輸入框時聂喇，你就會看到奇怪的事情辖源，我固定在底部的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();
}
});
但是這個方法有個缺陷，在安卓手機中沒有任何問題堕澄，但是在蘋果手機中無法看到固定在底部的內(nèi)容邀跃，原因就是蘋果手機底部有自帶的工具欄，這個會影響JS對瀏覽器可視窗口高度的判斷蛙紫，JS會認(rèn)為當(dāng)前可視窗口高度小于整個手機窗口的高度拍屑，就會將底部的內(nèi)容隱藏掉，和輸入法彈起時是一樣的效果坑傅，所以最后就是在蘋果手機中會看不到固定在底部的內(nèi)容僵驰。
方法二：
//navigator.userAgent.indexOf用來判斷瀏覽器類型
var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
if (isAndroid){//如果是安卓手機的瀏覽器
var win_h = $(window).height();//關(guān)鍵代碼
$("body").height(win_h);//關(guān)鍵代碼
window.addEventListener('resize', function () {
// Document 對象的activeElement 屬性返回文檔中當(dāng)前獲得焦點的元素。
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
第二種更加全面唁毒，所以肯定推薦第二種呀蒜茴！
