浅谈 React Native 的 PixelRatio

PixelRatio，像素密度。为什么React Native 提供一个PixelRatio 组件？

在 React Native 开发中，使用的尺寸单位是 pt，但由于移动设备的像素密度不一样，即 1pt 对应的像素个数是不一样的。为此，React Native 提供了 PixelRatio API 来告知开发者当前设备的像素密度。

注意：在RN中， PixelRatio 指的是 devicePixelRatio，即 window.devicePixelRatio，

window.devicePixelRatio 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：

window.devicePixelRatio = 物理像素 / dips

其中dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip 可以用来辅助区分视网膜设备还是非视网膜设备。

所有非视网膜屏幕的iphone在垂直的时候，宽度为320物理像素。当你使用<meta name="viewport" content="width=device-width">的时候，会设置视窗布局宽度（不同于视觉区域宽度，不放大显示情况下，两者大小一致，见下图）为320px,于是，页面很自然地覆盖在屏幕上。

非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1.
而对于视网膜屏幕的iphone，如iphone4s,纵向显示的时候，屏幕物理像素640像素。同样，当用户设置<meta name="viewport" content="width=device-width">的时候，其视区宽度并不是640像素，而是320像素，这是为了有更好的阅读体验，更合适的文字大小。

这样，在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.

以phone4为例：
主屏尺寸：3.5英寸 (对角线)
主屏分辨率：640x960像素-->屏幕物理像素
屏幕独立像素：320x480 像素
计算设备的像素密度：devicePixelRatio = 640/320 = 2

参考文档：http://www.zhangxinxu.com/wor...相关单位："Points",pt，大小固定，属于绝对单位，适用于印刷、打印媒体。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!