0 Comments

移动端手机建设viewport标签

发布于:2015-05-13  |   作者:爬行的蜗牛  |   已聚集:人围观

现在手机端的流量已经超过了移动端,所以移动端的网页设计和网站建设的重要程度慢慢的超过了pc端。爬行的蜗牛做过几个移动端的网站,每次第一步要做的都是复制一个标签<meta name="viewport" content="width=device-width, initial-scale=1">。

我们不能只知其然,而不知其所以然,我们详细的来了解下 viewport这个标签。“viewport”,翻译为中文可以叫做“视区”,大家都知道移动设备的屏幕一般都比PC小很多,所以在移动设备上时,页面要缩小。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。很多东西都会看不清楚。所以我们必须根据移动端设备的分辨率来控制这个“视区”。

这里我们用到了“viewport”这个标签,比如手机的分辨率宽是500的,我们就可以这么写<meta name="viewport" content="width=500"/>,因为移动端的分辨率是不同的,所以我们就会用到<meta name="viewport" content="width=device-width, initial-scale=1">这个标签这个完美的解决了这个问题,不管什么大小的分辨率都会百分百和这个设备一样。width-device也就是设备宽度。那后面的这个initial-scale=1是什么意思呢这个事缩放比例为1,也就是不缩放,这两个如果分开写也就是<meta name="viewport" content="width=device-width">和<meta name="viewport" content="initial-scale=1">都可以让页面百分百适应不同的移动端设备。但是<meta name="viewport" content="width=device-width">这个在iphone和ipad上是无效的,<meta name="viewport" content="initial-scale=1">这个在ie上是无效的,所以我们只要把这两个写在一起就完美的解决了这个问题。

好了我们顺便看一下这个viewport标签的其他属性吧

width

设置layout viewport  的宽度,为一个正整数,或字符串"width-device"

initial-scale

设置页面的初始缩放值,为一个数字,可以带小数

minimum-scale

允许用户的最小缩放值,为一个数字,可以带小数

maximum-scale

允许用户的最大缩放值,为一个数字,可以带小数

height

设置layout viewport  的高度,这个属性对我们并不重要,很少使用

user-scalable

是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

最后总结一句我们写移动端站的时候别忘了复制上<meta name="viewport" content="width=device-width, initial-scale=1">就可以,希望能帮到大家。

爬行的蜗牛:http://www.pxwoniu.com/wzzt/88.html

标签:爬行的蜗牛(283)css(8)
飞机

扫描二维码,访问爬行的蜗牛手机网站

在线咨询