PPI 提升 N 倍,利用系数上像素代表物理像素

无需加好友免费技术支持

创作者：RickyLong

来源

:

如上图所述， Native app 选用原生开发 app, 特点是特性更强，能够启用系统软件 api ,可是公布 app 流程繁琐，不混合开发。

而 Web app , 特点是混合开发，改动便捷，主要缺点不可以启用当地 api, 并且客户体验比不上原生态 app, 好。

而 Hybrid app , 融合之上2个优势，可以说非常 nice。

也称为设备 单独像素，逻辑性像素 。CSS抽象化在公司中应用 px 。

值是相对应的， 并不是绝对性 ，依据 dpr 来决定一个 CSS 比如，当客户缩放时，像素代表好多个物理像素， dpr 也会变成 2， 这时一个 CSS 像素代表2个物理像素。

留意： 计算机中的设备像素一般相当于一个 CSS 因此我们在这里 PS 网页切图尺寸一般代表物理像素大小。

又被称为物理像素，一切设备显示器的物理像素总数自发生至今都是不变的，单位为 pt (点)。物理像素是屏幕上闪光点。物理像素点射大小由厂家确定，尺寸不规律。

指显示屏对角长度，单位是 英尺 ，留意英尺是长度计量单位，而非面积单位。 1英尺（inch）=2.54cm（cm） 。

显示屏尺寸=像素/像素/素/PPI。

利用系数(英尺)像素(设备像素)的总数。它是一个固定主要参数。 PPI=显示屏斜度的像素/显示屏尺寸 。如下所示:

因此要提升 PPI 横向和纵向的方向像素点总数必须提升。因而，同样的尺寸同样规格(inch)下，PPI假如像素增加一倍，就会成为原先的像素 4倍 ，其实就是所 PPI 提升 N 倍，利用系数上像素点的总数成了原先的 N^N 倍，如图所示。 查看不同类型的设备 ppi

PPI值越大，屏幕上像素越大，显示屏就会越清楚。以下是同一张图片。

但另一方面，因为利用系数(英尺)没变化，由于 PPI 伴随着物理像素点的提高，对应的物理像素点也会减少。与以上物理像素点规律反过来，PPI 提升 N 倍，利用系数像素点大小将变成原先的 1 / N^N 倍。如图所示：

与此同时，对于一个图象，把它放到比现在更地区 PPI 大中型设备还会按照上述占比缩小。比如，一个放在一个 PPI 为自己 2 当倍设备处时，图象会变小 四倍 ，如下图所示。

可事实上，大家希望图片维持原先大小，最好是维持原先的画面质量。针对上述所说情况，解决方法是设备 DPR 必须原设备 2 倍，即便一个 CSS 像素 必须代表的物理像素需要变为最原始的 2 倍，这保持着图象大小没有变化，与此同时图象 屏幕分辨率 也要变为原先的 二倍 ，那样，图象的质感就始终不变。

DPR=物理像素/css像素 。获得： window.devicePixelRatio 。 查看1 。 查看2

它本质上是指一个 CSS 好多个像素代表 物理像素。它的意思是让图象展示在早高清屏幕上。

实际上，当像素比超出 2 以后，人眼识别不了。

仅针对 PC 如果把终端设备网页页面立即放进移动智能终端，默认设置会变小。最先，移动智能终端的像素点一般比 PC 顶端更为聚集，因而对应的物理像素点能变，与此同时 在缩放的前提下 ，电脑浏览器将根据实际情况再次变小。 缩放比=物理像素(即设备像素)/ 视口总宽(html 默认设置总宽为 980px, 用 document.documentElement.clientWidth 方式获得) 。因而，在研发移动智能终端时，必须恰当设定 ViewPort 数值。

最典型的 ViewPort 设定值如下所示：

width : device-width (设备的具体总宽-即 设备的 css 像素 ）。user-scalable : 是不是容许客户 设定或默认设置 网页页面缩放在视口总宽上，数值no或yes，代表不可以和容许。initial-scale : 界面的原始缩放值是一个数字(能够带小数)。minimum-scale : 网页页面能够缩放最小的比例值为一个数字(能带小数字)。maximum-scale : 网页页面能够缩放最大的比例为一个数字(能带小数字)。需注意，在手机端，假如 不受限制缩放 ，因而，为了保证网页页面所有由此可见，网页页面将正确 总体 开展缩放, 缩放计算方法如下所示： 缩放比(initial-scale)=css像素(设备css像素)/viewport总宽(html总宽) 。

initial-scale = 1 ，可达到和 width=device-width , 相同的实际效果。如果都设置权限，取二者的最高值。

一般严禁客户缩放，如下所示：

依据上述公式计算，大家能设缩放比和动态设置 viewport 的总宽。

创作者：RickyLong

来源

: