一直以来对HTML5页面在手机端的显示有些疑惑,今天刚好看到了CSS中的媒体查询方面的介绍。随便就了解到了 viewport(视口)这个概念。
在HTML5页面头部,我们一般会看到下面的这段声明代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
以上代码也是主要为了网页能在手机端能很好的适应。现在我们就了解下这句话如何作用网页的,以及这里的 viewport 是什么含义?
在了解这些之前,我们首先看下 CSS pixels 和 device pixels 的概念:
CSS pixels可以理解为css像素,是浏览器使用的抽象单位,主要用来在网页上绘制内容。也可以说css px是专门为web开发者提出的一个抽象概念,也只跟我们平时写的css样式有关,与分辨率(比如720px*1280px)里的px没关系。
device pixels可以理解为是设备像素,官方的解释是:显示屏幕的最小物理单位,每个dp包含自己的颜色、高宽等。
在PC端,浏览器缩放比例为100%,也即默认情况下,1 CSS pixel = 1 device pixel 。
但是这手机端,情况却就复杂的多!
Viewport起源于苹果,但现在已经被大多数浏览器支持。关于viewport有两个概念visual viewport跟layout viewport。这里visual viewport也就是视觉上的窗口,可以理解为设备自己的宽度。这时,如果你有一个长960的页面,有一个元素是20%(实际解析出来就是192px)。但如果我用宽为320px的屏幕打开呢,这个元素就成了64px,但是这个时候我设置的字体大小是12px,在320px的屏幕上就只能显示64/12个字了~
鉴于这个问题,苹果找到一种解决方法,在移动版的safari中定义了viewport meta标签,它的作用就是创建一个虚拟的窗口(viewport),这个虚拟的窗口就是layout viewport分辨率接近桌面显示器,apple将其定位为980px。在手机上,可以通过document.documentElement.clientWidth来获取。
其他浏览器厂商也有不同的解决办法,例如UCweb是使用的中间技术。
另外据说,不同浏览器厂商对于layout viewport的大小都有自己的定义。但是,我用手上不多的几个手机(小米2s、SONY、金立、ipad)测试的结果,都是980px。其中在小米2s上测试了小米自带浏览器、QQ浏览器、UC浏览器、谷歌浏览器,还有opera浏览器,结果都一样;其他的手机上面不管装了什么浏览器,都测试了,结果都是980px。但是这个值对于我们web开发来说,好像也没有什么用处。
因为大多数情况下,<meta name="viewport" content="width=device-width" /> 这个标签对我们来说是最给力的,可以让我们的页面里的图文显示的是正常的,很大程度上提高了页面的可读性。而这一meta标签的功能就是设置layout viewport为device-width的宽度。但是device-width具体是什么呢?
第一代iphone的时候,分辨率为320*480,屏幕尺寸为3.5寸(注意,这个3.5寸说的是屏幕的对角线宽),这时候device-width就是320px,也是手机的分辨率宽,此时device-width就是设备宽。但第二代的iphone分辨率提高为了480*960,屏幕尺寸为依然为3.5寸,如果device-width还是设备宽,那么同样是320px的页面放480*960的手机屏上,图文就会变得比较小,又会影响其可读性。因此iphone的device-width一直维持在320px,ipad一直维持在1024px。这个时候,device-width就不是设备宽了(也就不是分辨率的宽了),是一个中间层。Android采用的也是这一概念,其device-width值以360居多,但也不乏有像540px和600px这样的奇葩。在设置了<meta />标签以后,device-width值可以用window.innerWidth来获取device-width值。
这是iphone设备的viewport尺寸
- iPhone4~iPhone5S: 320*480px
- iPhone6~iPhone6S: 375*627px
- iPhone6 Plus~iPhone6S Plus: 414*736px
综上所述,一般我们在制作手机端的页面时,应该在页面头部声明那句代码,另外要注意设备的 viewport ,在制作页面时要注意控制网页的宽度问题。