您當前位置>首頁 » 新聞資(zī)訊 » 網站(zhàn)建設 >
移動(dòng)web開發 手機輸入框彈出的問(wèn)題
發表時間:2017-3-30
發布人:葵宇科技
浏覽次數:17
在移動(dòng)web開發中(zhōng)和(hé)pc端不同的是,手機的輸入是軟鍵盤,這樣就會有個(gè)問(wèn)題,那就是當有輸入的時候,鍵盤彈起來,整個(gè)頁面難免會發生變化
1、頁面提高背景會出現不夠用的現象,
解決方法,在body中(zhōng)設置背景圖,即便是頁面擡升了,背景也依舊存在,
2、底部用fix布局
這個(gè)問(wèn)題會使得頁面提升而底部的fix也跟着提升,遮蓋住相應的頁面,這個(gè)有兩種解決方法
一、是頁面頁相應的提高,頁面變化多少(shǎo)我們讓上面的頁面滾動(dòng)多少(shǎo),
$('input').bind('click',function(e){
var $this = $(this);
e.preventDefault();
setTimeout(function(){
$(window).scrollTop($this.offset().top - 10);
},200)
})
二、把fix元素隐藏掉當頁面輸入完成再展示出來
var original = document.documentElement.clientHeight;
window.addEventListener("resize", function() {
var resizeHeight = document.documentElement.clientHeight;
if(resizeHeight != original) {
$('.bottom-button').css('display', 'none');
} else {
$('.bottom-button').css('display', 'block');
}
});
利用resize屬性,當手機輸入框彈出時,頁面屏幕會變形,resize就會執行,我們先獲取原來的高度,當發生變化時我們獲取現在的頁面高度,當頁面高度不一樣的時候就隐藏元素,