为什么同样大小的像素在移动端和pc端看起来不一样

最近几天在搭建博客，在做前端页面的时候因为要做成兼容pc端和移动端的响应式，对于我这样的菜逼来说没有接触过移动端，就在网上搜索了大量的资料，终于，终于，终于入门了。。。。

先放上各种资料的连接,请按照我整理的顺序看这些资料，非常受益。因为我知道很多前端开发人员，甚至是老手，他们在做移动端的时候不管三七二十一都会加上一个meta，作为新世纪的前端，我们要知其然知其所以然

4、[]

在看下面的解释的时候最好先看一下我上面罗列的第二项，好了，下面我将解释：为什么同样大小的像素(比如14px)在移动端（看起来小）和pc端看起来不一样？

ppi （Pixels Per Inch）

也叫像素密度，所表示的是每英寸所拥有的像素数量。密度越高，拟真越强。移动设备通常会给出对角线的长度（单位英寸），和长*宽的分辨率，所以根据公式可以算出ppi：

同理，如果只给出了设备长（单位英寸）和长度分辨率（单位像素），也同样可以算出来。

PPI=√(X²+Y²)/ Z (X:长度像素数;Y:宽度像素数;Z:屏幕尺寸)

dpi (Dots Per Inch）

这是和ppi容易混淆到一起的概念。指打印设备每英寸印刷出来的点有多少个,同一张图片打印出来和在电脑上看到的清晰度就不一定相同。因为不影响我们理解，有一些博客又喜欢混用，作为只跟电子屏打交道的前端开发，认为各大博客上的dpi=ppi就好。

dpr （device-pixel-ratio: Number of device pixels per CSS Pixel）

dpr可以用window.devicePixelRatio得到，是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式表示就是：window.devicePixelRatio = 物理像素 / css像素

大家通常指的dpr是个固定值：dpr的值表示在理想布局宽度（ideal viewport）里，使用多少个物理像素来渲染一个设备独立像素。

在ios中，dpr通常是1，2，3；但是在android中，ideal viewport会根据浏览器自己的喜好变化，甚至会是小数。现在andorid注重高分辨率，很多都达到3了。

为什么同样大小的字体（比如14px）或者同一个app的icon在不同的移动设备下人眼看起来的大小不一样？

答：其实这个问题等价于一个css像素在两个设备中分别等价于多少英寸。如果网页是在ideal viewport下，可以推理出一个公式：每个物理像素等于1/PPI()英寸)，在ideal viewport下，DPR表示1个css像素由几个物理像素组成。因此,得到公式：

（1/PPI）* DPR = DPR/PPI

举个例子：iphone6-PPI为326，DPR为2，DPR/PPI约等于0.0061;iphone6S-PPI为401，DPR为3，DPR/PPI约等于0.0075；所以iphone6s上的app和字比iphone6大哦。

通常，设备显示屏越大，一个css像素代表的物理尺寸需要大一点。因为人眼会离大屏幕的比较远，离小屏幕的比较近。虽然物理尺寸不一样，但是人眼感觉起来是差不多大的。

14寸笔记本的ppi大约是112,因此分母小，所以pc端上看起来很大