关于屏幕尺寸的一些问题总结

2倍屏，3倍屏，px，dp，这些概念因为不影响开发没有深入研究过，最近要写一个屏幕的工具类，就趁着这个机会彻底了解一下。

两种像素

• 物理像素：

  单位是px，是画面中最小的点(单位色块)。像素的大小是没有固定长度值，不同设备上1个单位像素色块的大小是不一样的。
  px在任何情况下都代表物理像素

• 逻辑像素

  单位是dp，如下栗子指的都是6寸的屏幕：
  在非Retina屏， 1dp == 1px ?： 1寸宽有100个像素点
  在2倍Retina屏，1dp == 2px ?： 1寸宽有200个像素点
  在3倍Retina屏，1dp == 3px ?： 1寸宽有300个像素点

• DPR

  DPR(设备像素比率) = px(物理像素)/dp(逻辑像素)
  在每英寸160点的显示器上，1dp = 1px，而设计师使用的是px

分辨率

1. 屏幕上共有多少像素点，例如：屏幕分辨率是1024×768，也就是说设备屏幕的水平方向上有1024个像素点，垂直方向上有768个像素点
2. iOS默认的单位是pt，android默认单位是dp，这两都是逻辑像素，在绘制时会自动转化为物理像素

一些有趣的尺寸API

1. PixelRatio.roundToNearestPixel

   将布局大小(dp)四舍五入为与整数个像素对应的最近布局大小。例如，在PixelRatio为3的设备上PixelRatio.roundToNearestPixel(8.4) = 8.33，它恰好对应于（8.33 * 3）= 25像素
   不是将dp转化为px

2. PixelRatio.getPixelSizeForLayoutSize

   将布局大小(dp)转换为像素大小(px)，保证返回一个整数

3. StyleSheet.hairlineWidth

   1. 当前平台上的最细的宽度。可以用作边框或是两个元素间的分隔线
   2. 该值并不是一个常量，他的单位是dp，但在不同分辨率上最后渲染出来的始终是1px的物理像素

RN如何做屏幕适配

1. 尺寸适配不同屏幕

1. 当设置的单位是dp时，不需要考虑这个因素，因为系统会根据DPR(设备像素比率)自动将dp转化成相应的像素值
   ?：1dp，在2倍屏上被转化成2px，在3倍屏上被转化成3px
2. 当设置的单位是px时，要将px转化成dp，因为RN的默认单位是dp，转换方法deviceWidth / 750 * size
   • deviceWidth是RN获取到的屏幕宽，单位是dp
   • UI搞是基于750px的屏幕进行设计
   • size就是设置的px值

2. 像素对齐

当第一步获取到的像素值是小数时，会导致在GPU渲染时，对没对齐的边缘，需要进行插值计算，这个插值计算的过程会有性能损耗，所以要用到roundToNearestPixel方法

3. 实现真正的1px的分割线

如果我们设置的单位是1px，走完上诉流程，在1倍2倍3倍屏上分别渲染的真正像素分别是：0.5px, 1px, 1.5px，在1倍屏和3倍屏上并不是我们真正想要的1px像素宽
如果我们设置的单位是1dp，走完上诉流程，在1倍2倍3倍屏上分别渲染的真正像素分别是：1px，2px，3px，结果也不是我们想要的。
解决方式就是，当想要设置1px的线宽时，直接返回StyleSheet.hairlineWidth

代码实现

const function px(size) {
  if (size == 1) {   
    return StyleSheet.hairlineWidth;
  }
  return  PixelRatio.roundToNearestPixel(deviceWidth / 750 * size);
}

迷惑的问题

1. RN使用android的dp单位，在iOS平台，内部会将他转换为iOS的pt么，还是说忽略了这个差异
2. iPhoneX的分辨率是1125×2436(指一共有1125×2436个像素点)，为什么在RN获取到的宽是375呢？

   iPhoneX的1125宽单位是物理像素px，RN默认尺寸默认单位是逻辑像素dp，在加上iPhonx是3倍Retina屏，根据DPR(设备像素比率) = px(物理像素)/dp(逻辑像素)原理，RN在渲染时自动将375dp转化为1125px，所以RN的屏幕宽为375而非1125.

3. 在理解px转pd的时候迷了三四天，老是担心10px，在不同设备上显示的大小不一致

   1. 其实显示的大小是一致的，关键是清晰度不同，就好比广场上的大屏幕和手机屏幕，同时播放一张图片，并不会因为手机小，显示的图片就少一块，只不过是清晰度不同而已。
   2. 另外此时10px的物理尺寸也是不一样的，因为分辨率越低，像素点越大，造成分辨率越低10px的物理尺寸会越大。

参考链接

1. 手机APP UI设计尺寸基础知识
2. 分辨率和像素是什么关系？
3. React native 分辨率适配(px,dp)