阅读 3754

移动端适配之三:使用meta标签设置viewport

前两篇博客,把像素和viewport的概念讲清楚了。现在开始,用meta标签来设置viewport。

meta标签

meta标签里面的内容,主要是提供关于这个HTML页面的元信息的。简单点说,就是你用这些信息来告诉浏览器,应该如何解析这个HTML文件。比如

<meta charset="utf-8">
复制代码

这个标签是告诉浏览器,该HTML文件的字符编码格式是utf-8。当浏览器解析该HTML文件时,由于meta标签位于头部,会先获取到这个信息,然后浏览器就用这个utf-8编码来解析这个HTML文件中的字符。

当然,除了上面这种简单的格式外,meta标签更常见的是这种name + content的形式:

<meta name="format-detection" content="telephone=no" />
复制代码

name属性的值告诉浏览器,这个meta标签设置的是format-detection,其具体值是content中的telephone=no,即忽略将数字识别成电话号码。

viewport的设置

上一篇博客的最后已经提到,我们所做的适配,就是要调整layout viewport的大小,而用meta标签就可以调整layout viewport的大小。上网去搜移动端适配,一定会看到下面这句代码:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

先介绍一下这几个属性:

属性名 说明
width 设置layout viewport的宽度,为一个正整数,或字符串width-device
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。安卓中支持,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px。

回到应用场景,我们用这个标签的主要目的是做移动端的适配,一般都是做一个专门为移动端设计的页面。所以,我们在设置layout viewport时,当然希望这个viewport的尺寸等于ideal viewport。

需求已经明确了,接下来看看我们如何利用上面表里的属性来实现。

利用width

<meta name="viewport" width="device-width">
复制代码

这个width,就是用来设置layout viewport的宽度。我们设置其值为device-width,也就是设置成设备的实际宽度。而ideal viewport的宽度是与设备的宽度相等的,所以,这句代码就把viewport设置成了ideal viewport的大小。可以分别用window.innerWidthdocument.document.clientWidth查看:

当然,只要你高兴,也可以设置成别的值,比如把宽度设置成1000,那么layout viewport就会比visual viewport大,浏览时会有一个滚动条。具体实现时,代码上最好加上initial-scale=1.0,防止浏览器对页面进行缩放。

利用scale

<meta name="viewport" initial-scale="1.0">
复制代码

Initial-scale用来设置初次加载页面时layout viewport相对于ideal viewport的大小。具体计算公式是:

layout viewport = ideal viewport / scale
scale = ideal viewport / layout viewport
复制代码

需要注意的是,利用scale设置,无论计算出来的layout viewport的值大小如何,最后都会被浏览器自动缩放到与visual viewport大小相等,并不会出现滚动条。具体看下面的例子,我们设置的红框大小为100x100px,字体大小为32px。

initial-scale=1.0

设置scale值为1.0,那么layout viewport的大小与ideal viewport大小相等:

此时红框显示出来的大小就是100px,字体大小也就是32px。

initial-scale=0.5

设置scale值为0.5,那么layout viewport的大小就是ideal viewport的两倍,即750px:

但是浏览器会把layout viewport进行缩放,从而达到与visual viewport大小适配。对于已经是visual viewport750px的layout viewport,需要缩放到以前的0.5倍,才能正好适配375px。所以,100px的红框看起来只会有50px的大小,字体也会对应的缩小一半。如果设计图的大小是750px,那么样式大小完全可以按照设计图来写,最后只要设置scale为0.5,视觉上的效果就是缩小后的。

这里用window.innerWidth打印出来的visual viewport大小不对,用screen.width打印出来是对的,具体原因网上也没查到。有知道的同学欢迎在评论区留言~

initial-scale=2.0

设置scale的值为2,那么layout viewport的大小就是ideal viewport的一半,即188px:

同样的,浏览器会自动缩放。本来是188px的layout viewport,需要放大两倍,才能填满visual viewport。此时,100px的红框会被放大成200px,字体大小会放大到64px。

同时使用

width和scale两种方式都可以实现,但是兼容性不同。我们的目的,是为了把layout viewport设置成ideal viewport的带下。为了能兼容所有的设备,就有了下面的方案:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

如果两者设置的大小不一样,那么会取较大者。设置width为device-width,然后再设置缩放值为1,就完全限制了layout viewport的大小为visual viewport了。其他的属性,都是来控制缩放的。其实,设置了maximum-scale=1.0, minimum-scale=1.0就相当于设置了user-scalable=no了。如果不禁用缩放,那么layout的viewport的大小在缩放时还是会变的。

小结

用viewport的目的,是为了设置layout viewport的大小,从而保证能在移动端设备上合适的显示出来。

文章分类
前端
文章标签