java h5 ios分析_踩坑ios H5

目录

1.input获取焦点时，页面被放大

设置meta标签

2.ios input输入时白屏

这个问题貌似只有再ios9中才有

解决方法：在input的父元素上添加相对定位就行了，非常神奇，具体因为啥不太清楚。。

style="postion:relative;"

3.软键盘撑起页面下不来

目前有2个方法：

(1) js控制focus blur

//input输入框弹起软键盘的解决方案。

var bfscrolltop = document.body.scrollTop;

$("input").focus(function () {

document.body.scrollTop = document.body.scrollHeight;

}).blur(function () {

document.body.scrollTop = bfscrolltop;

});

(2) (待验证0.0)

position: absolute;

webkit-overflow-scrolling: touch;

z-index:1;

//js再控制blur //让页面向下滑动500

document.body.addEventListener('focusout', function () {

window.scrollTo(0,500);

})

4.ios页面滚动不流畅

我的解决方法是，让html和body固定100%(或者100vh)，然后再在内部放一个height:100%的div，设置overflow-y: auto;和-webkit-overflow-scrolling: touch;

.h100scroll {

/* 模态框之类的div不能放在这个容器中 */

height: 100%;

overflow-y: auto;

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}

5.position:fixed/absolute随屏幕滚动

注：ios里貌似不支持fixed。。。这里主要指absolute

在position:fixed/absolute内加入：

-webkit-transform: translateZ(0);

抖动情况，则在内容区域，加入 ：

overflow-y: auto;