·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]html5中viewport的用途和用法说明

时间:2017-05-22 14:47web前端教程
[html5]html5中viewport的用途和用法说明

1.在web上浏览的时候,响应式布局是好用的,放大缩小页面都可以实现页面变更,但是在手机上调试的时候死活不能用

2.因为css中@media是根据window的宽度来控制css的,所以我尝试输出了一下在window变更的时候window的width,结果发现PC上使用时一切正常,而手机上输出的一直是980。

原因很简单,手机上的浏览器是全屏的,我手机实际宽度是320像素,而我手机分辨率是980宽度,所以手机上打出来的是980而不是320

3.增加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以后发现手机window的width变为320了,即预期效果
viewpoint说明

width 控制viewpoint的宽度,可以是固定值,也可以是device-width,即设备的宽度
height 高度
initial-scale 控制初始化缩放比例,1.0表示不可以缩放
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例

可见如果不定义viewpoint的话,页面宽度以屏幕分辨率为基准,而设置以后可以根据设备宽度来调整页面,达到适配终端大小的效果

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器