什么是viewport?
冀萧迟
2023-12-01
1.什么是viewport?
仅在移动端(触屏设备)才有viewport 视觉窗口
用来承载网页的虚拟区域,它缩放功能。
2.viewport还有什么功能?
默认的缩放比 在移动端加载完成之后的默认的缩放比例
是否运行用户自行缩放 用户能不能自己通过手指手势来缩放网页
允许最大缩放比例
允许最小缩放比例
可以设置自己的宽度和高度 viewport的宽度设置(一般默认的宽度是980px)
3.viewport怎么样设置?
在head中设置 meta 标签 并且有个属性 name="viewport"
**注意**最好写在字符编码申明之后,由于网页加载顺序是从上往下,优先让网页知道这是一个移动端特有的设置
content 属性是用来设置功能
width 视口宽度 (px 特殊的值 device-width 当前设备的宽度)
initial-scale 视口的默认缩放比
user-scalable 视口是否运行用户自行缩放 (0,1 no,yes)
maximum-scale 允许用户最大缩放比
minimum-scale 允许用户最小缩放比
height 视口高度
4.怎么利用视口做到自适应(移动端适配)?
1.设置视口的宽度和设备的宽度一样宽 就可以达到适配
2.设置视口的默认缩放比和pc端一致 1.0 的比例 就可以达到适配
但是一般在移动的设置 即会设置视口宽度也会设置默认缩放比 保证适配正确
移动端视频其他要求
1.不允许用户缩放
2.不允许有最大的缩放和最小缩放
视口标准设置
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>