今天在学习 RN（react native）时，突然想到一个关于像素的例子，正好以前也了解过像素密度等知识，突然和 RN 的例子结合起来时又想不通具体的场景了，所以决定总结一下相关的知识点。

背景

第一个问题：

在学习这个例子的时候，发现官网上讲的组件的宽高默认是绝对的 “px”，考虑到当代的布局都是使用 rem em 等单位定义宽高，这样直接用 px 会不会造成不同设备显示的大小也不同呢？这里的编码时的像素和我们日常生活中的手机像素是一样的吗？

原文描述如下：

The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

截图如下：

第二个问题：

我打开一个模拟器（iphone 6s Plus），然后在 VS Code 下定义和 demo 一样的 150 x 150，最后在电脑上比了一下，发现不是150，大概只有 122 x 122(误差在3之间)，很神奇，有点不明白为什么。

开始倒腾

第一个问题的解决：

然后我查阅了一下相关的资料，发现我们写代码时所说的分辨率和平时我们所说的 iphone 的分辨率是不同的，比如我当前在 mac pro 上打开的 iphone 6 plus模拟器，当我将宽度定义为 414 时，刚好将屏幕撑满，和我以前所知的iphone 6 plus分辨率为 1080 x 1920 不一样，然后我打开 Chrome devtool 时发现，真实的像素为 414 x 736

结论

原来是 iOS 提供了三种不同的分辨率，我们实际编码设计时用到的和日常所说的分辨率是不一样的，我们实际设计时所用到的应该叫设计分辨率，也可以叫设计分辨点（point）。
所以每个设备的设计宽度其实都是不一样的，单纯写死一个宽度可能会为后期设计埋雷。

第二个问题的解决：

通过反复对比思考，发现原来这是模拟器的一个坑，他不会完全显示它的内容的大小，而 chrome 的 dev tool 就可以完全显示，我们通过对比两张图你就明白了。
以下是 chrome 的 dev tool 下的 iphone 6 plus 内容的宽显示，你会发现两个地方的宽都为 414px

而对比模拟器的宽：

结论

原来是模拟器展示的不一样，我还以为是什么神奇的兼容性呢，有点坑。

— 纸上得来终觉浅，绝知此事要躬行