[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的话,页面宽度以屏幕分辨率为基准,而设置以后可以根据设备宽度来调整页面,达到适配终端大小的效果
热门文章推荐
- 10款html5网页播放器推荐(总有一款适合你)
- [html5]html5+css3实现图片斜角切成直角梯形显示的源代码
- [HTML5]HTML5视频video时间事件代码
- [微信]iOS苹果和微信中音频和视频实现自动播放的方法
- [html5]html5视频全屏实现的源代码
- [Html5]mobile-agent移动Agent,就是具有移动性的智能Agent
- [html5]视频播放器js控制vedio视频和分段播放
- [html5]H5播放器:竖屏播放\横屏播放\跟随旋转例子