• 视觉视口
  在 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 年引进的，用于控制移动端布局视口

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 标签，存在兼容性问题
  • 不希望适配的东西，比如边框，也强制参与了适配
  • 图片是失真

2. rem 适配

em 和 rem 都是 css 中的相对长度单位，区别：

 - em 相对的是父级元素的字体大小- rem 相对的是根元素的字体大小

• rem适配的原理：编写样式时统一使用rem 为单位，在不同设备上动态调整根字体的大小

具体方案：

淘宝，百度的移动端使用此方案。
1.设置完美视口
2.通过 js 设置根字体大小=（当前设备横向独立像素值*100）/设计稿宽度
3.编写样式时，直接以 rem 为单位，值为：设计值/100
4. 书写 js 代码进行实时适配

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'
})