发生背景
项目受众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
,组件就被放大了。
声明:本人理解可能不透彻,深入学习者请参考可靠资料。