1.h5如何兼容低版本浏览器
如果是ie可以使用html5shiv.js
2.h5移动端输入被键盘遮挡
表现：ios没问题，webview会跟随往上滚动，安卓会遮住
- 使用resize监听变化，设置position 为 absolute
- 把当前元素 使用scrollIntoView 滚动顶部
3.click有300ms的延迟
- 禁用双击
<meta content="user-scalable-no"> - 使用第三方库 fastclick.js
<script src=" fastclick.js "></script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
4.移动端touch事件穿透问题
表现：
image.png
<div class="container">
<div id="underLayer">底层元素</div>
<div id="popupLayer">
<div class="layer-title">弹出层</div>
<div class="layer-action">
<button class="btn" id="closePopup">关闭</button>
</div>
</div>
</div>
<div id="bgMask"></div>
$('#closePopup').on('tap', function(e){
$('#popupLayer').hide();
$('#bgMask').hide();
});
$('#underLayer').on('click', function(){
alert('underLayer clicked');
});
由于touchend先执行，然后会传递给下面的页面underLayer，使其触发了 click事件，实际在业务开发时，不应该穿透下去。
- 阻止默认行为
e.preventDefault - fastclick.js
<script src=" fastclick.js "></script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
消除trasition闪屏
其实就是通过设置一些3d的属性，浏览器开启3d加速，用gpu渲染
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
//方案2
.css {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
移动端input输入placeholder垂直不居中
line-height:normal
ios日期转换2020-11-12时候为NAN问题
表现：new Date("2020-11-12 00:00:00")，因为不支持xxxx-xx-xx格式
调整为 new Date("2020/11/12 00:00:00")
