meta viewport作用:
- 因为现在移动设备的PC的不同,也代表着不同浏览器的可视区域也是不同的。
- 而且还有一点,CSS中的1px不等同于每个设备的1px,也就是说每个设备的分辨率不同会影响到所在网页的显示大小
- 最重要的是用户缩放也会影响到显示的网页的效果。
而meta viewport就是为了解决以上问题的。
什么是缩放?
个人理解是用户在移动端主动改变屏幕伸缩大小(放大,缩小)的行为。
先入为主,先来介绍meta viewport的属性值
(1)width,height ,表示指定显示的大小,值为一个正整数,但是并不代表屏幕的宽度和高度,如果需要让两者相等,可以这样添加<meta name="viewport" content="width=device-width">
(2)initial-scale,是指初始进入网页后的缩放值,可以是数字,也可以带小数,可以这样添加meta name="viewport" content="initial-scale=1.0">
(3)minimum-scale 允许用户最小缩放值,用法:<meta name='viewport' content=" minimum-scale=0.8">
(4)maximum-scale 允许用户最大缩放值
用法
<meta name='viewport' content=" maximum-scale=1.0">
(5)user-scalable ,是否允许用户进行缩放,值为”no”或者”yes”,这是一个十分重要的用法,它可以让你的网页更好地匹配到不同的屏幕上面。
<meta name="viewport" content=" user-scalable=no">
简单实例:
这是一个什么meta viewport标签都不加的简单模仿百度新闻页面。
有兴趣的朋友,可以到网址(按我!!)上面f12看布局,布局主要用到的是等比例,但是网页的像素很显然是跟手机上的浏览器是不同的。
当我把屏幕缩放的时候会出现
这样的操作对用户体验是很不好的,而且不利于用户对于信息的获取。
所以加上了这个
<meta name="viewport" content=" user-scalable=no">
就可以让屏幕不去伸缩了。
- 还有一个问题,刚才也说过了,网页的布局是没有考虑到是否适配移动端的浏览器的。
所以当网页的宽度等于屏幕的时候
<meta name="viewport" content="initial-scale=1">
、
就会出现这种问题,这是因为我的字体大小设置得大小是em,而且高度也是设置为px的,前面也说过,电脑网页里面显示的px跟手机上的不一定相同,所以图片也跟着变长。
最后总结:
这几个属性是十分常用的,毕竟移动端的网页也是个个工程师攻克的难点,做兼容的核心就是要考虑在不同显示环境下的差别。