1 视口

视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。

一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。

1.1 布局视口

pc端：布局视口就等于当前浏览器的窗口大小

移动端：布局视口被赋予一个默认值，大部分为 980px，可以通过调用 document.documentElement.clientWidth / clientHeight 来获取布局视口大小。

1.2 视觉视口

视觉视口(visual viewport)：用户通过屏幕真实看到的区域,通过调用 window.innerWidth / innerHeight 来获取视觉视口大小。

1.3 理想视口

网站页面在移动端展示的理想大小,通过调用 screen.width / height 来获取理想视口大小。(CSS 像素 = 设备独立像素)

1.4 Meta viewport

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

上面是 viewport 的一个配置，我们来看看它们的具体含义：

`Value`	可能值	描述
`width`	正整数或`device-width`	以`pixels`（像素）为单位，定义布局视口的宽度。
`height`	正整数或`device-height`	以`pixels`（像素）为单位，定义布局视口的高度。
`initial-scale`	`0.0 - 10.0`	定义页面初始缩放比率。
`minimum-scale`	`0.0 - 10.0`	定义缩放的最小值；必须小于或等于`maximum-scale`的值。
`maximum-scale`	`0.0 - 10.0`	定义缩放的最大值；必须大于或等于`minimum-scale`的值。
`user-scalable`	一个布尔值（`yes`或者`no`）	如果设置为 `no`，用户将不能放大或缩小网页。默认值为 yes。

2 适配

2.1 为什么适配

由于移动端设备的屏幕大小不一，会出现相同的元素在不同手机上显示的效果不一样，若想要显示的效果的一样，那么必须做适配，适配的中心原则就是等比。适配方案：1.viewport、2.rem、3.vw

2.2 viewport适配（一般不用）

方案：设置布局视口等于设计稿的宽度，然后安装设计稿的宽高进行布局

<meta name="viewport" content="width=375"/>  //假设设计稿的宽375

优点：简单，不用复杂的设计

缺点：1px边框问题，图片失真

2.3 rem适配

方案1：

1.根字体大小=设备独立像素*100/设计稿宽 2.编写样式时已rem为单位除以100

//假设设计稿的宽度为375，要设计一个宽200px的div

<style> 
    div{
        width: 2rem;
    }
</style>
<script>
    function adaper(){
        const dpWidth=document.documentElement.clientWidth  //获取设备独立像素值
        const rootFontSize=(dpWidth*100)/375    //计算根字体大小
        document.documentElement.style.fontSize=rootFontSize+'px'   //设计根字体大小
    }
    adaper()
    //浏览器布局视口改变时监听
    window.onresize=adaper
</script>

方案2：配合less使用

1.根字体大小=设备独立像素/10 2.编写样式时已rem为单位除以根字体大小

xxx.less

//假设设计稿的宽度为375，要设计一个宽200px的div
@font:375/10rem
div{
    width: 200/@font;
}


<script>
    function adaper(){
        const dpWidth=document.documentElement.clientWidth  //获取设备独立像素值
        const rootFontSize=dpWidth/10   //计算根字体大小
        document.documentElement.style.fontSize=rootFontSize+'px'   //设计根字体大小
    }
    adaper()
    //浏览器布局视口改变时监听
    window.onresize=adaper
</script>

2.4 vw适配

vw和vh是相对单位，1vw等于布局视口的宽度的1%，1vh相当于布局视口高度的1%

xxx.less

//假设设计稿的宽度为375，要设计一个宽200px的div
@basic:375/100vw
div{
    width: 200/@basic;
}

3 vue3适配

1.安装依赖

npm install postcss-px2rem lib-flexible --save

2.配置说明

在项目入口文件 main.js 里引入 lib-flexible， flexible会自动根据设备情况动态设置rem的值的大小

import 'lib-flexible/flexible'

3.在vue.config.js中添加配置

const px2rem = require('postcss-px2rem')
// 配置postcs-px2rem
const postcss = px2rem({
  remUnit: 37.5   //UI设计图的10等分大小
})
css: { // 添加postcss配置
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
}

4 移动端事件

4.1 事件类型

移动端事件列表

touchstart 元素上触摸开始时触发可用于元素触摸的交互，比如页面跳转，标签页切换
touchmove 元素上触摸移动时触发可用于页面的滑动特效，网页游戏，画板
touchend 手指从元素上离开时触发跟 touchmove 事件结合使用
touchcancel 触摸被打断时触发

4.2 事件绑定

方式一

box.ontouchstart = function () {
    console.log('touch start')
}

方式二

box.addEventListener('touchstart', function () {
    console.log('touch start')
})

这里推荐使用第二种，第一种有时会失灵。

4.3 TouchEvent 事件

touches //屏幕上触点数
targetTouches   //当前元素上的触点数
changedTouches  //同时按下几个手机

4.4 点击穿透

touch 事件结束后会默认触发元素的 click 事件，如果 touch 事件隐藏了元素，则 click 动作将作用到新的元素上，触发新元素的 click 事件或页面跳转，此现象称为点击穿透

4.4.1 解决方法

阻止当前元素事件的默认行为。

cls.addEventListener('touchstart', function (e) {
    e = e || event
    e.preventDefault()
})

阻止所有元素事件的默认行为。

document.addEventListener('touchstart', function (e) {
    e = e || event
    e.preventDefault()
})

问题：因为禁止了所有元素默认行为，导致 a 标签不能跳转链接了

4.4.2 fastclick

一个专门用于解决事件点透的库仓库地址：github.com/ftlabs/fast…

<!-- 引入fastclick库 -->
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<!-- 使用fastclick库 -->
<script>
    if ('addEventListener' in document) {
        document.addEventListener(
            'DOMContentLoaded',
            function () {
                FastClick.attach(document.body)
            },
            false
        )
    }
</script>

https://market.aliyun.com/products/57002002/cmapi020534.html?spm=5176.2020520132.101.37.3cc27218r8Cme0#sku=yuncode1453400000


figurebest@163.com
december123

移动端笔记