移动端的viewport

现在的前端把更多的工作都搬到了移动端,由于移动互联网如此的火,想不被时代所抛弃,还是要时刻保持学习的。viewport就是你做移动前端入门必知的概念。
不过,我还是想说:那些整天H5、H5的人好烦人,虽然我知道他们在说移动端。+_+!

在同学群里聊到<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">这句话的一些含义,突然发现好像一直都是粘贴、复制,大家还是对其中的viewport究竟是什么概念还是不清楚,甚至是不对的。花了两三天的时间研读ppk大神的文章,总算有了一些了解,于是记录下来。

设备的1px和css的1px

在写css的时候,经常就是随手xxxpx的,这在一定程度上给了我们一种错觉就是css的1px等于设备的1px。在以前,这样理解是没有问题的,但是在现在的高清屏和手机端,这样解释显然通不过。还有一种情况就是我们在浏览器放大缩小时,也是解释不过去的。所以,css的px单位是一个抽象单位,它和设备像素存在一定比例关系。比如我们放大浏览器试图时,css的1个像素相当于设备的2个像素,缩小反之。

示意

在pc时代,我们的设备分辨率并没有这么高,这也包括只能手机初期。但自Apple公司推出Retina屏后,这时就是我们要懂得这个概念的必要的时刻。在设备显示面积不变的情况下,放入更多的物理像素,css的1px就是不等于真正的设备的1px。在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在些许的兼容性问题,所以我们现在还并不能完全信赖这个东西。

viewport的概念

viewport就是我们显示器要显示网页的区域,他其实存在于pc和移动设备上的,只是pc上不突出这个概念。这块区域可能大于我们的浏览器,表现就是出现滚动条。如果是出现在pc上,就相当于下图:

在移动端也就是下面这样子:

三个viewport

移动设备和pc最大的区别就是屏幕的大小,这导致移动相对于pc的本质区别。试想,如何让移动浏览器在这么小的屏幕上显示一个网页?

浏览器生产商的答案就是设置一个足够大的viewport,使其可以正常显示任何网页,ppk把这个viewport称为layout viewport。这个viewport可以使用document.documentElement.clientWidth/clientHeight来取得。

有个一个可以使显示网页的viewport,就得有个和可视区域相等的viewport,这个就称为visual viewport

还有一个viewport,就是我们想要的理想viewport,称为ideal viewport。我们一般都把ideal viewport设置成设备显示宽度。

meta标签信息

我们在写移动端的时候,都是写width=device-width,我们讨论的就是这device-width是什么。其实,这个不是我们说的你的设备的真实分辨率,也不是浏览器真是设置的那个layout viewport宽度,它是你的屏幕宽度,你可以用screen.width取到。我个人觉得这个概念是在高分辨率的设备出现后才开始变得让人误解,因为人们一直以为这个device-width是设备的真实的那个分辨率。比如iPhone4的分辨率是640x960,但是他的屏大小并没有变,所以依旧是320。这是css的1px就占有两个实际像素。

参考文章:

  1. A tale of two viewports — part one
  2. A tale of two viewports — part two
  3. Meta viewport