meta viewport 详解

2018-9-2 00:30| 作者: admin| 查看: 1461| 评论: 0|来自: 蚂蚁部落

首先看一个简短的代码实例:

[HTML] 纯文本查看 复制代码
<meta name="viewport" content="width=640">

上面代码将视口的宽度设置为640px;<meta name="viewport">用来控制移动端viewport视口。

关于viewport视口更多内容可以参阅viewport视口详解一章节。

移动端视口默认是布局视口,并且不允许用户手动缩放,但移动端通常需要的是完美视口,所以就需要通过meta viewport对视口大小进行控制,看一个代码实例:

[HTML] 纯文本查看 复制代码运行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

上面代码将视口的宽度设置为设备独立像素宽度,默认无缩放,并且也不允许用户缩放。

参数解析:

(1).width:设置视口的宽度,可以是具体的像素值,也可以特定参数,例如device-width。

[HTML] 纯文本查看 复制代码运行代码
<meta name="viewport" content="width=640"> <!--视口宽度为640px--> 
<meta name="viewport" content="width=device-width"> <!--视口宽度为设备屏幕的宽度(设备独立像素)-->

(2).initial-scale:设置页面的初始缩放值,为一个数字,可以带小数。

[HTML] 纯文本查看 复制代码运行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">

设置初始缩放为1.0,也就是不缩放。

(3).minimum-scale:设置视口最小缩放值,一个数字,可以带小数。

[HTML] 纯文本查看 复制代码运行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5">

设置最小所放置为0.5,也就是可以将视口缩小一半。

(4).maximum-scale:设置视口最大所放置,一个数字,可以带小数。

[HTML] 纯文本查看 复制代码运行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5,maximum-scale=2">

设置最大缩放为2,也就是可以将视口最大缩放两倍。

(5).height:设置视口的高度,此使用通常不会使用,不多做介绍。

(6).user-scalable:设置是否是否可以缩放。

[HTML] 纯文本查看 复制代码运行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">

设置视口不可以进行缩放操作。

特别说明:缩放是以完美视口尺寸为参考进行的,所以使用如下方式也可以将视口设置为完美视口:

[HTML] 纯文本查看 复制代码运行代码
<meta name="viewport" content="initial-scale=1.0">

不设置width=device-width,将初始缩放设置为1即可将视口宽度设置为完美视口宽度。

上述方式有一定的浏览器兼容问题,所以最好两者都写上:

[HTML] 纯文本查看 复制代码运行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width与initial-scale=1是否冲突:

设置initial-scale=1表示将视口设置为设备宽度,如果此时设置width非设备宽度是否会造成冲突。

此种情况浏览器会以较大的那个为标准,如果设置width为440px,而设备宽度为320px,那么就以440px为准。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部