Viewport

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

layout viewport(布局视口)

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

visual viewport(视觉视口)

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

ideal viewport(完美视口)

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

参数设置:

  • 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" />
    原文作者:dingding199389
    原文地址: https://segmentfault.com/a/1190000013503317
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞