通过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()
})