视口viewport
视口: 移动端特有,有默认宽度980px,且有缩放功能,用来承载网页,浏览器承载视口,这个区域是虚拟的
pc:浏览器窗口 - 网页
移动:浏览器窗口 - 视口 - 网页
问题: 当设备宽度 < 网页宽度时(视口承载网页有默认狂赌默认缩放功能)导致网页内的内容缩放
解决:
做移动端适配:(标准移动端页面)
1. 视口的宽度要和设备一致,网页100%,网页宽度和视口宽度一致
2. 默认视口缩放比例和PC(网页预览效果)比例一致1.0
3. 不允许用户缩放页面
视口设置完成以上需求:
在<head>标签中添加<meta>
<meta name="viewport">:声明视口
content="":设置属性
width:视口宽度
height:视口高度
initial-scale:视口默认缩放比例
user-scalable:是否允许用户自行缩放
maximum-scale=1.0:最大缩放比例(可默认不写)
minimum-scale=1.0:最小缩放比例
<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=no">