CSS像素与绝对像素

之前在电视的webview上投放广告页面时，遇到了个问题，就是视窗大小和文档大小不一致。最后发现原来有CSS Pixel这个概念，搜集了一些资料，希望能把这个问题捋捋清楚。

首先提出一个大家常常会忽略的问题：

如今主流手机屏幕的像素点数已经远远超过了桌面显示器的像素数量，5.5英寸1920x1080P的手机与一个21英寸1920x1080P的显示器相比，同等面积下，手机的像素点更密集，可想而知，在手机屏幕上一个像素点是非常小的。

那么在CSS中设置font-size:12px，如果“手机屏幕物理像素：CSS像素”=“1：1”，那么手机上展示出来的字体你可能需要放大镜才能看清，但为什么如今的手机屏幕依然能清晰的显示？

答案就是：CSS中的px与屏幕上的物理像素px不是等同的。

逻辑分辨率与物理分辨率

由于以上物理像素尺寸差异导致的问题，我们不可能把电子文件中的像素与物理像素做1：1的适配。必须在小的设备上适当放大，也就是说用多个物理像素来显示一个电子像素，从而保证阅读质量。
所以devicePixelRatio应运而生：逻辑分辨率 = 物理分辨率 / devicePixelRatio

普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3

因为大部分桌面显示器的devicePixelRatio为1，所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。

举个栗子来说，一张100x100的图片，通过CSS设置它width:100px;height:100px。在电脑上打开，没有什么问题，但是在手机上打开，屏幕按照逻辑分辨率来渲染，假设手机的devicePixelRatio=3，那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片，你的图片可能因此变得模糊，因为细节不够。所以一般明智的做法是把图片换成300x300的，CSS宽高不变，这样在手机上展示时，CSS宽高换算成物理像素是300x300，你的图片也是300x300，就不会变糊了。

移动端开发方案

打开一个页面，移动端浏览器会自动寻找<meta name='viewport'>,如果指定了视窗口的width，就会把页面放到指定width的viewport里面。如果没有指定，则默认值有的是980，具体根据浏览器来定的。（我遇到的就是这个问题，通过添加下面的代码解决）

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

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

总结

当时因为是在电视上投放页面，并未当成手机移动端来考虑，出现这个问题一直认为是对方的问题，结果发现是页面缺少viewport meta标签，反思良多。
自己的对于移动端Web开发了解的还不是很多，这篇文章一是记录问题，二是能简单梳理下CSS像素的概念。如果今后有机会接触更多的移动开发的话，会另起炉灶写一篇更为详细的关于这方面的文章，既是学习，也是记录。

本文部分文字借鉴自知乎回答、网络BLOG：