移动端适配
- 视觉视口
在 PC 端，视口的默认宽度和浏览器的窗口宽度一致。
在 PC 端可以通过一下方式获取宽度。
console.log('最干净的显示区域', document.documentElement.clientwidth); // 常用
console.log('最干净的显示区域 + 滚动条', window.innerwidth);
console.log('最干净的显示区域 + 滚动条 + 浏览器边框', window.outerwidth);
console.log('与浏览器无关，当前设备分辨率横向的值', screen.width);
- 移动端视口
有三个概念：
1.布局视口
2.视觉视口: 用户的可见区域，它的绝宽度永远和设备屏幕一样宽。
3.理想标准视口
移动端获取布局视口的方式：document.documentElement.clientwidth
获取视觉视口的方式：window.innerwidth
viewport
meta-viewport 标签是苹果公司在 2007 年引进的，用于控制移动端布局视口
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0 viewport-fit=cover" >
viewport 相关选项
1.width 布局视口的宽度，可以是设备标识 device-width,也可以是具体值，但有些安卓手机不支持具体值，IOS 全系都是支持的。
2.initial-scale 【系统】初始缩放比例
3.maximum-scale 【用户】缩放的最大比例
4.minimum-scale 【用户】缩放的最小比例
5.user-scable 使用允许用户通过手指缩放 苹果浏览器 safari不识别该属性
6.viewport-fit 设置为 cover值可以解决刘海屏的留白问题
适配
由于移动端设备的屏幕尺寸不一致，会出现同一个元素，在两个不同的手机上显示效果不一样（比例不同）。
想让同一个元素在不同的设备上显示效果保持一致，就需要适配
无论采取何种适配方式，中心原则永远是等比
主流的适配方式有以下 3 种：
- viewport 适配
- rem 适配（主流方式，几乎完美适配）
- vw 适配
1. viewport 适配
- 方法：拿到设计稿之后，设置布局视口为设计稿宽度，然后直接按照设计稿给的宽高布局即可。
- 优点：不用做复杂的计算，直接使用图稿上的 px值
- 缺点：
- 不能使用完整的 meta 标签，存在兼容性问题
- 不希望适配的东西，比如边框border，也强制参与了适配
- 图片会失真
2. rem 适配
em 和 rem 都是 css 中的相对长度单位，区别：
- em 相对的是父级元素的字体大小
- rem 相对的是根元素的字体大小
- rem适配的原理：编写样式时统一使用rem 为单位，在不同设备上动态调整根字体的大小
具体方案：
淘宝，百度的移动端使用此方案。
1.设置完美视口
2.通过 js 设置根字体大小=（当前设备横向独立像素值*100）/设计稿宽度
3.编写样式时，直接以 rem 为单位，值为：设计值/100
4. 书写 js 代码进行实时适配
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
* {
margin: 0px;
padding: 0px;
}
#demo {
width: 9.2rem;
height: 9.2rem;
margin: 0 auto;
margin-top: 0.4rem;
background-color: lightblue;
}
style>
head>
<body>
<div id="demo">div>
<script type="text/javascript">
function viewAdapter() {
// 获取视口宽度，开启了标准视口，布局视口=设备横向独立像素值
const dpWidth = document.documentElement.clientWidth;
// 计算根字体大小
const rootFontSize = dpWidth / 10;
// 设置根字体大小
document.documentElement.style.fontSize = rootFontSize + 'px';
}
viewAdapter()
// window.onresize = viewAdapter
script>
body>
html>
3. vw 适配（百分比）
- vw 和vh是 两个相对单位
- 1vw = 布局视口宽度的 1%
- 1vh = 布局视口高度的 1%
不过 vw 和 vh 有一定的兼容性问题
vw 兼容性问题请看这里 详情
4. 移动端事件
- touchstart 元素触摸开始的时候触发
- touchmove 元素触摸移动的时候触发
- touchend 手指从元素上离开的时候触发
- touchcancel 触发被打断的时候触发
应用场景：
- touchstart 事件可用于元素触摸交互，比如页面跳转，标签页切换
- touchmove 事件可用于页面的滑动特效，比如游戏，面板
- touchend 事件主要和 touchmove事件结合使用
- touchcancel 使用率不高
注意：
- touchmove事件触发后，即使手指离开了元素，touchmove事件也会触发
- 触发 touchmove 和 touchend 事件，一定要先触发 touchstart
- 事件的作用在于实现移动端界面的交互
5. 点击穿透
touch 事件结束后会默认触发元素的click事件
如果 touch 事件隐藏了元素，则 click 事件动作将作用到新的元素上，触发新的 click事件或页面跳转，这种现象被称为点击穿透。有点类似于事件冒泡。
解决方案1：阻止默认行为
nodeElement.addEventListener('touchstart', (ev)=> {
ev.preventDefault()
})
解决方案 2：使其背后的元素失去click事件特性，改用 touchstart,即用touchxxx来代替背后元素的 click事件
nodeElement.addEventListener('touchstart', ()=> {
location.href = 'http://www.xxx.com'
})