移动端布局(viewport)方法

Posted chuntaoj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端布局(viewport)方法相关的知识,希望对你有一定的参考价值。

viewport默认有6个属性

  • width: 设置viewport的宽度(即之前所提及到的,浏览器的宽度详),这里可以为一个整数,又或者是字符串"width-device"
  • initial-scale: 页面初始的缩放值,为数字,可以是小数
  • minimum-scale: 允许用户的最小缩放值,为数字,可以是小数
  • maximum-scale: 允许用户的最大缩放值,为数字,可以是小数
  • height: 设置viewport的高度(我们一般而言并不能用到)
  • user-scalable: 是否允许用户进行缩放,‘no‘为不允许,‘yes‘为允许

我们把这个标签是在head里面,像这样

<meta name="viewport" content="initial-scale=1">

这样就可以做到对viewport的控制了

以上是关于移动端布局(viewport)方法的主要内容,如果未能解决你的问题,请参考以下文章

总结个人使用过的移动端布局方法

总结个人使用过的移动端布局方法

移动端布局之postcss-px-to-viewport(兼容vant)

移动端布局之postcss-px-to-viewport(兼容vant)

移动端布局基础viewport

移动端布局 viewport 用法 简单总结