作者：李克龙

原产地：https://segmentfault.com/a/1190000019241607

App 分类

如上图所示，Native app是原生开发的app，具有性能更好的优势，可以调用系统api，但是app的发布过程比较繁琐，不跨平台。

Web app有跨平台、修改方便的优点，但缺点是不调用原生api，用户体验不如原生app。

融合了以上两者优点的混合app，可以说是非常好看。

00-1010

尺寸相关概念

也称为设备独立像素和逻辑像素。CSS中使用的一个抽象概念，单位是px。

该值是相对的，但不是绝对的。根据dpr，确定一个CSS像素代表几个物理像素。也有一些情况，比如当用户缩放时，dpr也会变为2，此时，一个CSS像素代表两个物理像素。

注意：计算机中的设备像素通常等于CSS像素。因此，我们在PS中的裁剪尺寸一般也代表物理像素所代表的尺寸。

CSS 像素

也叫物理像素。任何设备屏幕的物理像素数从外观来看都是固定的，单位是pt点)。物理像素是屏幕上的一个发光点。单个物理像素的大小由制造商决定，大小不是固定的。

00-1010是指屏幕的对角线长度，单位为英寸。请注意，英寸是长度单位，而不是面积单位。1英寸)=2.54厘米厘米)。

屏幕尺寸=屏幕斜边的像素/PPI。

00-1010每单位面积的像素数英寸)。它是一个固定值和固定参数。PPI=屏幕斜边的像素/屏幕尺寸。以下：

因此，为了提高PPI，有必要增加水平和垂直方向上的像素数量。因此，在相同尺寸英寸)下，PPI加倍，那么像素就会变成原来的4倍，也就是PPI增加n倍，单位面积的像素数就会变成原来的n倍，如下图所示。查询不同设备的ppi

PPI值越高，一定尺寸的屏幕上像素越多，屏幕越清晰。下图相同。

但同时，由于单位面积英寸)没有变化，相应的物理像素会因PPI的增加而缩小。与上面的物理像素规则相反，当PPI增加n倍时，单位面积的像素大小将变成原来的1/N^N倍。如下图：

a4aa93de2569?from=pc”>

同时对于一张图像，放到比当前 PPI 大的设备上时，也将按照上面的比例变小。例如一个放到一个 PPI 为自己的 2 倍的设备上时，图像将缩小 四倍 ，如下图。

但是在实际当中我们更希望图片保持原有大小，并且最好是也不变模糊，保持原有的清晰度。对于上面的情况，解决方案是设备的 DPR 需要是原来设备的 2 倍，即使一个 CSS 像素 需要代表的物理像素点需要变为原来的 2 倍，这就保持了图像的大小未发生改变，同时图片的 分辨率 也需要变为原来的 两倍 ，这样就保持图像的清晰度未发生改变。

像素比 DPR

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

它的本质是指一个 CSS 像素代表几个 物理像素。它的意义是为了让图像能够早高清屏上显示。

其实上当像素比超过 2 后，肉眼是识别不出来的。

视口 ViewPort

只针对 PC 端的页面直接放到移动端的情况的话，默认会进行缩小。首先是因为移动端的像素点一般比 PC 端更加的密集，所以相应的物理像素点都会变得很小，同时在 这个缩放的基础之上 ，浏览器还会根据情况继续进行缩小。 缩放比=物理像素即设备像素)/ 视口宽度html 的宽度，默认是 980px, 用 document.documentElement.clientWidth 方法获取) 。所以在移动端开发的时候，我们需要正确的设置 ViewPort 的值。

典型的 ViewPort 的设置值为下面这样：

<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”>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 , 一样的效果。如果都设置了，取两者的最大值。

一般当我们都禁止用户进行缩放，如下：

minimum-scale=1,maximum-scale=1,user-scalable=no

一般根据上面的公式，我们可以通过设置缩放比，动态的设置 viewport 的宽度。

作者：RickyLong

出处:https://segmentfault.com/a/1190000019241607