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")

前端常见面试题-兼容优化