2020.12.13 红岩 移动端适配

通过meta 设置 CSS像素 等于 设备的像素

当页面缩放比例为 100% 时，1 单位的 CSS 的 pixel 是严格相等于 1 单位的设备 pixel，即 CSS 像素 = 设备独立像素，理想视口 = 视觉视口。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

最常用的移动端适配方法：
1.CSS 单位 rem
简单的理解，rem 就是相对于根元素的 font-size 来做计算
2.vw、vh方案：
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
上面的flexible方案就是模仿这种方案，因为早些时候vw还没有得到很好的兼容。
• vw(Viewport’s width)：1vw等于视觉视口的1%
• vh(Viewport’s height) :1vh 为视觉视口高度的1%

横屏适配

1JavaScript 检测

window.addEventListener("resize", ()=>{
    if (window.orientation === 180 || window.orientation === 0) { 
      // 正常方向或屏幕旋转180度
        console.log('竖屏');
    };
    if (window.orientation === 90 || window.orientation === -90 ){ 
       // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
        console.log('横屏');
    }  
});

2.媒体查询

@media screen and (orientation: portrait) {
  /*竖屏...*/
} 
@media screen and (orientation: landscape) {
  /*横屏...*/
}

移动端的事件

点击穿透

这个问题在当有一个绝对定位或固定定位元素绑定了 touch 事件，那么覆盖在他之下的具有点击特性的元素也会被触发。
这是由于我们按钮绑定的事件是 touch 事件，a 标签是 click 事件，在 touch 事件触发后，我们弹出框的遮罩层就消失了，但这时候的 click 事件就被 a 标签给捕获到了，形成了击穿的效果。
有以下解决方法：

button.addEventListener('touchstart', function(e) {
  button.style.display = 'none'
  e.preventDefault()
})