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 ,组件就被放大了。


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

你可能感兴趣的:(Vue,vue.js,前端,html5,html)