H5项目笔记

safari 长页面滚动卡顿   

body { height: 100vh; overflow-y: hidden }
.wrapper { overflow-y: auto;  -webkit-overflow-scrolling: touch; }

页面滚动到某个dom处

document.getElementById("id").scrollIntoView();

点击事件与穿透

双层元素叠加时，在上层元素上绑定touch事件，下层元素绑定click事件，由于click事件发生在touch事件之后，点击上层元素，元素消失，下层元素会触发click事件，由此产生了事件穿透。

解决方法：直接使用 fastclick 库

软键盘弹起/收回引起的页面样式错乱

// 记录原有的视口高度 
const originalHeight = document.documentElement.clientHeight;
window.onresize = function(){
    var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if(resizeHeight < originalHeight ){
        // 恢复内容区域高度
        // const container = document.getElementById("container")
        // 例如 container.style.height = originalHeight;
 　　}else{}
}

 iPhone X系列安全区域适配问题

/* 适配 iPhone X 顶部填充*/
@supports (top: env(safe-area-inset-top)){
    body,.header {
        padding-top: constant(safe-area-inset-top, 40px);
        padding-top: env(safe-area-inset-top, 40px);
        padding-top: var(safe-area-inset-top, 40px);
     }
}
/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
    body,.footer {
        padding-bottom: constant(safe-area-inset-bottom, 20px);
        padding-bottom: env(safe-area-inset-bottom, 20px);
        padding-bottom: var(safe-area-inset-bottom, 20px);
     }
}

页面缩放问题

<meta name="viewport" content="width=device-width, initial-scale=1.0;user-scalable=no"> 

手机端调试  vconsole 控制台插件