移动端适配方案 viewport

背景

今年3月份的时候新入职了一家公司有需求要做自己公司APP上面的小程序。就是类似于微信小程序那种结构。

其中有遇到了一个问题，就是移动端的适配问题，之前我一直用的rem的适配方案（不知道的可以点这里），也没有什么太大的问题。但是又想着都 9102 了会不会有点捞～于是就找找看看有没有更好的替代方案（结合时代的）。

响应式 Web 设计 - Viewport

什么是 Viewport ？

viewport是用户网页的可是区域。翻译中文就是“视区”，手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

关于 Viewport 的三个理论

来自于 PPK(Peter-Paul Koch) 关于 viewport 的三个观点（so~1,so~2,so~3），有很多文章的观点都出自那里（包括本文）。

• layout viewport（布局视区）：在移动端浏览器上面，视觉视区限制了布局视区，为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的 viewport 设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现横向滚动条的情况 。布局视区的宽度是可以用 document.documentElement.clientWidth 来获取。上一张偷来的图，帮助理解。
• visual viewport（视觉视区）：用户透过窗口可以看到的内容区域的大小，用户可以以滑动或者其他的方式来查看页面其他内容，通过 window.screen.width 来获取它的宽度，同样上一张偷来的图，帮助理解。
• ideal viewport（理想视区）：在我们理想的状态下面，比如说有一段14 px 的文字，或者是其他的页面内容，无论在什么设备下面都展现出差不多的大小。ideal viewport 并没有一个固定的尺寸，不同的设备拥有有不同的 ideal viewport。所有的 iphone 的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在 iphone 中，css 中的320px就代表 iphone 屏幕的宽度。但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等。

如何使用 Viewport

利用 meta 标签设置 viewport

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

先介绍一下都有什么属性以及意思吧，大家自然就知道这段代码是什么意思了

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• minimum-scale：允许用户缩放到的最大比例。
• maximum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

所以说上面的那段代码的意思就是：设置页面的 layout viewport 等于 ideal viewport 宽度，初始化的页面缩放比为1，用户最大/最小的缩放比都为1，页面不允许用户手动缩放。

代码里面的书写方式

vw单位换算： 视口宽度为 100vw 占满整个视口区域，那么 1vw 相当于占整个视口宽度的1%，所以 1px= 1/375*100 vw 所有的页面元素都可以直接进行计算换算成 vw 单位，但是这样计算和百分比方案计算比较类似，都会比较麻烦。

但是这么麻烦的东西肯定会有工具来解决的 postcss-px-to-viewport 这样的话你的代码原来怎么写现在还是怎么写。工具会预处理css，讲 px 单位按照设定的值转换为 vw 单位，同时也要设定一些配置，下面是配合Vue-cli3.0的使用：

// package.json
  ...,
  "devDependencies": {
    ...,
    "postcss-px-to-viewport": "^1.1.0",
    ...
  }

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: '375', // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      // propList: ['*', '!background-image'],
      selectorBlackList: [
        // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        'ignore'
      ],
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位
      mediaQuery: false // 允许在媒体查询中转换`px`
      // exclude: /(\/|\\)(node_modules)(\/|\\)/
    }
  }
}

代码书写：

实际页面：

写到这里基本上都结束了，就可以开心的使用了。

参考文章

这两个本来都是不收费的（对现在是付费的）

• https://www.w3cplus.com/mobile/vw-layout-in-vue.html
• https://www.w3cplus.com/css/vw-for-layout.html
• 你的代码里有你读过的书和走过的路
• 经历过才会有更好的成长

博客地址 欢迎到访

GitHub 我不要Star✨（疯狂暗示）