视口viewport

时间 2019-11-30

标签 viewport 栏目 HTML5 繁體版

原文原文链接

视口：移动端特有，有默认宽度980px，且有缩放功能，用来承载网页，浏览器承载视口，这个区域是虚拟的浏览器

　　pc：浏览器窗口 - 网页scala

　　移动：浏览器窗口 - 视口 - 网页it

问题：当设备宽度 < 网页宽度时（视口承载网页有默认狂赌默认缩放功能）致使网页内的内容缩放meta

解决：移动端适配

　　作移动端适配：（标准移动端页面）im

　　　　1. 视口的宽度要和设备一致，网页100%，网页宽度和视口宽度一致移动端页面

　　　　2. 默认视口缩放比例和PC（网页预览效果）比例一致1.0viewport

　　　　3. 不容许用户缩放页面移动

　　视口设置完成以上需求：view

　　　　在<head>标签中添加<meta>

　　　　<meta name="viewport">：声明视口

　　　　content=""：设置属性

　　　　width：视口宽度

　　　　height：视口高度

　　　　initial-scale：视口默认缩放比例

　　　　user-scalable：是否容许用户自行缩放

　　　　maximum-scale=1.0：最大缩放比例（可默认不写）

　　　　minimum-scale=1.0：最小缩放比例