Vue笔记 适配移动端

发生背景

项目受众95%都是移动端用户，需要同时适配两套UI。
但是 PC 端的用户也不能扔，毕竟核心用户在 PC 操作……

解决方案

在静态 HTML 的 head 标签中，添加一行 viewport ：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

发生原因

由于 UI 组件库 用 px 作为布局单位，所以移动端的组件看起来小很多。
这时候， viewport 就派上用场了。

width=device-width ：将布局限制在浏览器内置的宽度内。
initial-scale=1.0 ：默认情况下以 1:1 的比例展示网页。
minimum-scale=0.5 ：最小的缩放比例。
maximum-scale=2.0 ： 最大的缩放比例
user-scalable=yes ：允许用户缩放

浏览器自有一套适配逻辑，移动端会把缩放比例设为 2.0 ，组件就被放大了。

---

声明：本人理解可能不透彻，深入学习者请参考可靠资料。