浅谈 React Native 的 PixelRatio

发布时间:2019-06-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了浅谈 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,大小固定,属于绝对单位,适用于印刷、打印媒体。

脚本宝典总结

以上是脚本宝典为你收集整理的浅谈 React Native 的 PixelRatio全部内容,希望文章能够帮你解决浅谈 React Native 的 PixelRatio所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。