关于css像素/设备像素以及viewport的笔记

为了搞明白像素是什么这个概念,我要使用比较有趣的方式来讲述.回想起以前玩的马里奥游戏1代.其中所有的场景元素都是由"像素点"构成的.正如我们封面所展示的一样,一个马里奥的人物形象被定在了16x16的格子范围内.

像素与分辨率

屏幕之所以能显示图案,是因为屏幕上有一个又一个的小灯泡组成的,那么为了显示这个马里奥的形象,你的屏幕不管是纵向横向都至少要有16个小灯泡.好,从现在开始我管这些小灯泡叫做 像素(pixel).

以前的技术嘛,比较落后,所以一个像素的灯泡都很大很大,假想一下,在一个宽度为16cm的屏幕里面,1cm的宽度刚好放下1个像素灯泡.那这个屏幕是刚刚好可以容得下一个初代马里奥的.
但是随着技术的进步,一个宽度为16cm的屏幕里面,1cm竟然能够容下2个像素灯泡.也就是说一横行现在竟然有32个像素灯泡了!那这样子的话,初代马里奥在我们的两种屏幕下的效果看起来就像这样子:
马里奥在不同分辨率的屏幕下
从视觉上看,马里奥变小了!当相同尺寸的屏幕里面能包含的像素点变多了,原来设计的图案就会相应地看起来变小了!

一个屏幕能包含多少个像素点,我们提出一个概念叫做 屏幕分辨率(screen resolution)

设备像素与css像素

但是这个时候有人不服了,他说,我想要让马里奥充满我的屏幕啊!我可是要用来做壁纸的!所以,为了满足这个人,就必须把图案进行这样的变更:
马里奥在不同分辨率的屏幕下2
我们来仔细观察一下马里奥的眼睛,在原来的图纸中,马里奥的眼睛是1x2(格)的,而在新图纸中,马里奥的眼睛是2x4(格)的.在这1cm x 2cm 的范围内,格子数变多了!意味着设计的细节也可以变多了.

这个时候我们换一个方式来理解,初代马里奥一直在人们心目中都是一个16x16的形象.你不可能说因为屏幕像素点变多了就说他变成了一个32x32的形象了吧.而且,上面这幅图里面的右边屏幕,基本上每4个紧挨着的像素点的颜色都是一样的.

我们说初代马里奥是16x16的形象,那也就是说 右边屏幕里把2个像素当成左边屏幕里1个像素使用了

在你的头脑中,你会把马里奥的图案分割为16x16个格,我们可以把这样的格子称为 假想像素.然而屏幕分辨率那么高,为了看得清楚这只马里奥,他在屏幕上绝对不能用16x16个像素灯泡来显示出来,在屏幕上可能会用n个像素点来表示1个假想像素,所以我们不得不提出一个新的概念叫做 设备像素.

上图的右侧屏幕,马里奥的形象就是 用了2个设备像素来显示1个假想像素

为什么要提及这个?


上图是微信公众平台页面在电脑端和手机端同等比例下看起来的效果.你会发现,是同一张"设计图纸".但是在手机端看起来小的可怜!你不得不进行缩放才能看得到内容.但是!作为一个有情怀的开发人员!我们应该了解清楚怎么弄才会更完美!

回想起前面的内容你就不难发现,其实前面我所说的 假想像素 是应用在css里面的, css中的1px并不等于设备中的1px.所以我们管css里面的像素叫做 css像素(废话).前面的 设备像素还是叫 设备像素.

viewport

看到上面那张图片,不禁让我问自己一个问题,不同的设备屏幕下,当网页上的根元素css的宽度设置成100%,那么这个宽度到底是多少css像素和占用了多少设备像素?

为了解决这个问题,不得不借用ppk大神对于viewport研究的描述.

两个viewport

ppk大神提出了两个viewport的概念,第一个叫做 视觉视口(visual viewport), 意思就是你的设备屏幕提供的空间,多大就是多大.就像iphone6的屏幕分辨率是 750px x 1334px(设备像素),这就是它的视觉视口大小.

另一个是 布局视口(layout viewport) ,指的是网页在设备里的具体大小.你可以设想一下如果把上面那个微信公众平台的图片里面的页面放大到和pc端一样大的话,它的视觉视口已经不能完全装下一个网页了,看起来就像下面这样,而且会出现横向的滚动条.为了描述这个网页的具体大小当然得提出这个概念啦~

我们平常在描述一个网页的时候通常不会去说这个网页的高度是多少..而一般都会说这个网页的宽度是多少.而我这里所用的描述也一样,这里所说的所有视口,不会特意说的情况下我就是在说视口的 宽度.

在html中,我们viewport属性来改变网页的 布局视口,下面举个例子

<meta name="viewport" content="width=750"/>

这就是将 布局视口宽度 改变成 750px (css像素).如果按照这么设置,也就是说,在iphone6中,1设备像素就刚好会等于1css像素,刚好 视觉视口 就会等于 布局视口,不会出现横向的滚动条.

需要注意的就是,按照以上设置,假设你页面中还存在比布局视口的宽度还大的元素的时候,各种浏览器对于这个情况的处理不太一样.所以要尽量避免.

假设我们做了如下调整,那么在iphone6的页面中,1css像素就会等于1设备像素,而且还会出现横向的滚动条.

<meta name="viewport" content="width=1500"/>

假设我们做了如下调整,在iphone6的页面中,因为iphone6的屏幕宽度为750设备像素,是不是这个页面就只显示为一半呢?

<meta name="viewport" content="width=375"/>

不是的,这样子设置会让布局视口还是保持在750设备像素,但是750设备像素却代表了375css像素.

正如上图右边,1css像素会等于2设备像素

做一下总结:

  • 当 视觉视口 = 布局视口,不会出现横向滚动条,而且1css像素 = 1设备像素

  • 当 视觉视口 < 布局视口,会出现横向滚动条,而且1css像素 = 1设备像素

  • 当 视觉视口 > 布局视口,不会出现横向滚动条,而且1css像素 > 1设备像素

ppk大神还对viewport中的width取值范围做了测试,我对他测试的总结就是,这个width不要小于320,也不要太大(10000是上限)

ideal viewport

随着屏幕尺寸种类分辨率越来越多,如果对viewport里面的width进行具体取值,那就会导致各种屏幕看起来差异化十分地大.为了让页面显示起来差异不是很大,各种设备会有一个页面宽度的理想值.大部分主流的型号具体的理想值可以在这里查.为了在我们的网页中使用这个理想值,可以将width直接设置成 device-width:

<meta name="viewport" content="width=device-width"/>

这个由理想值确立的viewport,ppk称之为 理想视口(ideal viewport)

viewport的其他属性

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  1. width在上面做了很多介绍了这里就不再说明了

  2. initial-scale 是指页面的初始缩放值,可以设置成一个小数.默认值是1.0.

    缩放值和viewport的关系: 缩放系数 = 理想视口宽度 / 视觉视口宽度

  3. minimum-scale 是指页面的最小能缩放到多小.

  4. maximum-scale 是指页面的最大等缩放到多大.

  5. user-scalable 是指允不允许用户缩放页面.取值为 yes(允许,1) 或 no(不允许,0)

  6. height 是指高度,正如我所说的一般不会去定义页面的高度,所以基本上不会用到这个值.

  7. target-densitydpi 是用来设置 安卓 中,1css像素等于多少设备像素的.(取值有high-dpi, medium-dpi, low-dpi, device-dpi)

target-densitydpi 只在安卓中起作用,所以好像安卓官方要取消这个值,所以尽量避免使用.

一般我在网页中的viewport都是这么设置的:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  css 设计 前端