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：