方法1. 给 body设置fiexd（此方法会导致第一次点击Input没有光标）
- 尝试了给别的元素点击或再次获取当前Input焦点， 都没效果（没有解决导致第一次点击Input没有光标的问题）；
···
/*弹窗关闭*/
$('.closePop').on('click', function(){
$('.flexBg, .appPop').hide();
hidePop();
});
// 点击展开弹窗
$('p').click(function () {
$('.flexBg, .popLogin').show();
showPop();
})
// 关闭弹出的时候， 调用这个代码；
function hidePop() {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS) {
$("body").css({
position: "relative"
})
}
}
// 展开弹框的， 调用这个方法；
function showPop(){
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS) {
$("body").css({
position: "fixed"
})
}
}
/*弹窗关闭 end*/
···
这里的解决方法： 主要是如下步骤
- 判断是否是Ios， 如果是， 则当获取焦点的时候， 修改定位方式
if(isiOS) {
$("body").css({
position: "fixed"
})
}
- 当失去焦点的时候，
$("body").css({
position: "relative"
})
方法2. 改用上下定位+（中间全局+滚动条）。
···
html, body{
height: 100%;
width: 100%;
display: block;
}
.header{
width: 100%;
height: 100px;
position: absolute；
left: 0;
top: 0;
}
.footer{
width: 100%;
height: 100px;
position: absolute;
left: 0 ;
top: 0;
}
.main{
width: 100%;
height: 100%;
overflow: auto;
}
···
