解决键盘弹出时,webview被挤压导致背景图片被挤压出空白
2016-08-10 09:28
726 查看
第一种方法:
1、给外层div容器设置背景图片
style="height: 100%;background: url(../../images/10.jpg);background-size: 100% 100%;"
2、监听键盘弹出事件,弹出时调整容器的高度以适应背景图片
<body onresize="windowSizeChange();">
var oglHeight = document.querySelector("body").offsetHeight;
var windowSizeChange = function() { //弹出键盘时调整页面的高度,防止背景图片被挤压出空白区域
var tempHeight = document.querySelector("body").offsetHeight;
if(tempHeight == oglHeight) {
console.info("屏幕键盘隐藏");
document.getElementById('content').style.height = "100%";
} else {
console.info("键盘显示");
document.getElementById('content').style.height = "390px";
}
};
第二种方法:
背景固定,使用:before
body:before {
content: "";
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../../images/10.jpg) center 0 no-repeat;
background-size: cover;
}
1、给外层div容器设置背景图片
style="height: 100%;background: url(../../images/10.jpg);background-size: 100% 100%;"
2、监听键盘弹出事件,弹出时调整容器的高度以适应背景图片
<body onresize="windowSizeChange();">
var oglHeight = document.querySelector("body").offsetHeight;
var windowSizeChange = function() { //弹出键盘时调整页面的高度,防止背景图片被挤压出空白区域
var tempHeight = document.querySelector("body").offsetHeight;
if(tempHeight == oglHeight) {
console.info("屏幕键盘隐藏");
document.getElementById('content').style.height = "100%";
} else {
console.info("键盘显示");
document.getElementById('content').style.height = "390px";
}
};
第二种方法:
背景固定,使用:before
body:before {
content: "";
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../../images/10.jpg) center 0 no-repeat;
background-size: cover;
}
相关文章推荐
- 实现qq聊天界面设计 完美解决edittext 软键盘弹出时listview背景不被挤压+listview Item和edittext的相对位置不变
- 解决webview中输入框完成输入隐藏键盘后滑动界面又弹出软键盘问题
- 实现qq聊天界面设计 完美解决edittext 软键盘弹出时listview背景不被挤压+listview Item和edittext的相对位置不变
- 创建手机页面弹出键盘的时候背景图片被挤上去的解决办法
- 解决webview加载过大的图片导致水平滑动的视觉
- IOS WebView修改contentInset 导致webview长按弹出菜单跳动的解决方法
- 问题解决:ScrollView 内置 Webview导致页面下方空白区域
- webview设置禁用连接点击,输入框焦点弹出键盘
- webview loadUrl() 弹出系统浏览器解决办法
- android webview ZoomButtonsController 导致android.view.WindowLeaked 问题彻底解决
- Android中 在显示ImageView时图片上面和下面都出现一段空白区间的解决办法
- Webview 图片异步加载及bug解决
- webview加载htmlstring里有工程里的图片解决方法
- Webview网页中文本框不弹出输入法 没有得到焦点解决方法
- android webview js alert对话框 不能弹出 解决办法
- 解决android中webview对话框不能弹出
- android webview 点击文本框弹出数字键盘
- 有效解决WinForm窗体背景图片导致闪屏刷新问题
- webview的input输入框获取焦点弹出数字键盘
- 点击Webview中的输入框没有弹出键盘