前端-<基础>-px,ppi,DPR，解决iphone适配问题

简介

最近才真正的懂了什么是px，本着把问题完全想通的态度，从而探索相应的资料。有感而发，记录一下。

什么是px？

px，全称 pixel，翻译过来就是”像素”的意思，代表屏幕分辨率的单位，ex:1366*768px.
然而 px并不代表长度单位，px更像是一种色块，比如1366*768px的屏幕的笔记本，这就说明该屏幕上 横向最多有1366个像素的色块，竖向最多有768个像素。1366X768就是这个屏幕上所有的色块，每个色块呈现不同的颜色，而表示不同的文字和图片等等。

为什么px不是长度单位？

为什么px不是长度单位，这时候就要延伸出来ppi这个术语。
ppi,全称Pixels Per Inch,表示的是每英寸所拥有的像素(Pixel)数目。
英寸是长度单位，比如114ppi的屏幕，也就是114px的色块=1Inch（英寸），那么此时 1px=1/114Inch(114分之一英寸),假如96ppi的屏幕，也就是96px的色块的=1Inch（英寸），那么此时1px=1/96Inch（96分之一英寸）。他们同样式1px，但长度肯定是不相等的。

ppi的计算公式：

根据勾股定理，√（x²+y²）计算出屏幕对角线上的色块（px）的数量，除以屏幕尺寸，屏幕尺寸也是算的屏幕对角线的长度，计算出每英寸上的色块（px）数量.

DPR又是什么？

DPR 全称device pixles ratio 设备像素比。
DPR历史：源于apple公司的iphone手机，为了让用户看的更清晰，结果弄了一个视网膜屏幕，比如iphone 4s，326ppi的屏幕，在当时是普通android手机ppi的两倍，吊炸天啊，其意思就是为了给用户带来更清晰的画面，同样英寸的手机的像素色块数，iphone是android的两倍。
因此DPR为2.

DPR计算公式：
物理像素/CSS像素（单一方向上，x或y方向上）=DPR.

物理像素是什么？物理像素指的就是手机实际的像素，比如iphone5的设备像素为640px*1136px。
CSS像素是什么？也就是浏览器规定的像素，浏览器规定：不管你是普通屏幕，还是吊炸天的视网膜屏幕，默认都是以160ppi的屏幕计算像素，因此 iphone5的css像素约为320px*568px。（还是浏览器叼！）
申明：DPR 2，DPR 3出现在移动端比较常见，然而，笔记本一般都是<=1.0DPR。

解决iphone手机上设置边框1px,实际是2px的问题

综上所述，可以延伸出来，当此手机为DPR=2的屏幕的手机，同时设置了
meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”

视口的概念：

布局视口 layout viewport —–网页在开始设计时候的宽度（比如960px）
可视视口 visual viewport—– 浏览器会自动把布局视口缩放至能在手机上显示的可视宽度（缩放比例为 手机设备宽度/布局视口宽度 ex:320/960=0.3）
网页在手机上呈现的 用户的缩放会改变可视视口宽度
理想视口 ideal viewport—— 按照理想视口布局 希望用户不通过缩放 而呈现很好的页面效果 当布局视口=设备宽度的时候 用户就不用缩放就能呈现很好的页面效果

设置理想视口宽度—–
设置布局视口宽度=浏览器默认的设备宽度 (CSS像素，比如iphone 640px,浏览器默认的宽度160ppi下为320px)

如果不设置布局视口的宽度时，布局视口的宽度就是浏览器厂商默认的宽度ex:960px 980px

那么因此实际上，当此手机为DPR=2的屏幕的手机，在浏览器中1px CSS像素=2px的物理像素，也就是代码中1px的色块表示2px的物理色块。这时，解决方案之一就是，根据媒体查询的devicePixelRatio进行相应的缩放就可以实现1px的像素。

为什么会有@2X，@3X图的出现？

这就是针对于不同dpr的设备，1pxCSS像素=多个物理像素而设计的，试想一下，一个320px*568px的图片，在iphone5手里，全屏呈现出来会是什么效果?
因为图片是物理像素的，此时真实的物理像素图片，1px对应着2px的手机物理像素，其意思就是手机每1px物理像素对应着0.5px像素点。此时浏览器，320px*568px的图片此时会被强行拉伸到640px*1136px，这样才能满足，1个图片物理像素点对应1个设备像素点（实际图片是0.5px对应1个物理像素点）。因此图片就会模糊，当用了640px的图片时，1个图片物理像素点对应1个设备像素点,才会清晰而不会模糊.