Viewport

一个移动专属的Meta值,用于定义视口的各类行为ide

layout viewport(布局视口)

视口的分辨率接近于PC显示器布局

visual viewport(视觉视口)

手持设备物理屏幕的可视区域idea

ideal viewport(完美视口)

它相似于布局视口,但宽度和视觉视口相同,用户不用缩放和拖动网页就可以很好的进行网页浏览。而完美视口也是经过viewport meta的某种设置来达到scala

参数设置:

  • width 控制Viewport的宽度,能够指定一个值或者设备的宽度,如device-width为设备的宽度(单位为设备缩放比例1:1的像素),这里设置的宽度等于设备宽度;
  • initial-scale 初始缩放,即页面初始缩放程度.对应的值是一个浮点值,这里是一个乘积关系,页面呈现大小等于设置的宽度乘以initial-scale的值;
  • maximum-scale 最大缩放,即容许用户缩放的最大比例,也是乘积关系.通常设置为1:1的比例不会让用户缩放的;
  • minimum-scale 最小缩放,如上;
  • user-scalable 用户是否能够手动缩放,通常值设为no,不容许用户缩放;

让viewport的宽度为设备宽度,在viewport中布局完成后显示在屏幕上时不缩放,即布局是怎样,显示就是怎样。这样咱们在制做网页时只须要直接针对手机屏幕大小进行设计:设计

<meta name="viewport" content="width=device-width,initial-scale=1.0" />
相关文章
相关标签/搜索