移动端开发相关概念了解

屏幕尺寸

手机屏幕对角线的长度
1英寸（inch）=2.54厘米（cm）
5.2英寸是手机屏幕对角线的长度

分辨率

分辨率1920px*1080px的意思就是，屏幕竖向的高度上有1920个像素块，在横向的宽度上有1080个像素块

PPI

image.png

通常情况下，每英寸像素值越高，屏幕能显示的图像也越精细。
有研究表明，人类肉眼能够分辨的最高像素点密度是300每英寸像素。^[1]超过300每英寸像素的屏幕被常常称为Retina显示屏，这个概念最早由苹果公司于2010年推出iPhone 4手机的时候提出。但是，人眼能否分辨两个像素与观察图像的距离和人的视力也有很大的关系。另外，根据显示亮度的不同，抑或是图像由不同的介质显示（纸张或显示器），人眼的分辨能力也会改变。因此，“人眼像素的分辨上限为300PPI”有一定的广告宣传成分。

image.png

DPI

单位dppx（dots per pixel）表示每个DIP占用几个物理像素。或者说，CSS中的单位px在屏幕上占用了多少物理像素。在PC上，这个值通常为1。但浏览器提供了缩放功能，它实际上就是修改设备像素比来实现的，所以调整浏览器的缩放可以看到devicePixelRatio属性的变化。

viewport

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小.所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px

• layout viewport
  默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。
• visual viewport
  然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取
• ideal viewport
  移动设备的理想viewport

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport

最后

最后关于设计师和前端工程师之间如何协同：
一般由设计师按照设备像素(device pixel)为单位制作设计稿。
前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。