關於螢幕尺寸的一些問題總結

最終適配方案

尺寸優化

參考鏈結

2倍屏，3倍屏，px，dp，這些概念因為不影響開發沒有深入研究過，最近要寫乙個螢幕的工具類，就趁著這個機會徹底了解一下。

螢幕上共有多少畫素點，例如：螢幕解析度是1024×768，也就是說裝置螢幕的水平方向上有1024個畫素點，垂直方向上有768個畫素點

ios預設的單位是pt，android預設單位是dp，這兩都是邏輯畫素，在繪製時會自動轉化為物理畫素

因為rn預設單位是dp，不需要考慮這個因素，系統會根據dpr(裝置畫素比率)自動將dp轉化成相應的物理畫素值，比如：1dp，在2倍屏上被轉化成2px，在3倍屏上被轉化成3px，如下圖

由此可得出如下兩個結論：

尺寸固定，解析度越高，畫素點越小，內容就越清晰尺寸固定，不同解析度1dp的寬度值時一致的

補充：前端不支援dp/pt單位，起到類似作用的是rem，rem的思路跟上面一致，但那個轉換過程需要自己手動配置

此時因為解析度相同所以畫素個數也相同，但每px的尺寸相對於螢幕寬的比例是一致的，如下圖：

由此可得出如下兩個結論：

同解析度下，雖然設定裝置尺寸不同但1px相對於螢幕的比例卻是一樣的，如上圖所示1dp都是螢幕的1/4，這正好符合我們的螢幕適配的定義同解析度下，尺寸越大，單位畫素尺寸越大，內容越模糊前端朋友可能更習慣於px，需要將px轉為dp

/* 轉換公式 * * devicewidth是rn獲取到的螢幕寬，單位是dp * ui設計稿的寬度為750px * size就是設定的px值 * * 前面的除法得到在當前裝置上每1px等於多少dp */devicewidth / 750* size

可能有朋友迷糊了，為啥要用750呢，這個取決於你們ui給的設計稿的寬度，如果設計稿為375，那麼就除以375

在rn中，dp單位解決了適配解析度的問題；dp最後轉化的px解決了適配不同尺寸的問題；最後的px轉dp解決了前端經常使用的單位問題

function
px(size)
return  pixelratio.
roundtonearestpixel
(devicewidth /
750* size)
;}

當設定的畫素值是小數時，會導致在gpu渲染時，對沒對齊的邊緣，需要進行插值計算，這個插值計算的過程會有效能損耗，所以要用到pixelratio.roundtonearestpixel方法

將布局大小(dp)四捨五入為與整數個畫素對應的最近布局大小。例如，在pixelratio為3的裝置上pixelratio.roundtonearestpixel(8.4) = 8.33，它恰好對應於（8.33 * 3）= 25畫素

不是將dp轉化為px

若設定1dp，在1倍2倍3倍屏上分別渲染的真正畫素分別是：1px，2px，3px，結果也不是我們想要的。

解決方式就是，當想要設定1px的線寬時，直接返回stylesheet.hairlinewidth

當前平台上的最細的寬度。可以用作邊框或是兩個元素間的分隔線

該值並不是乙個常量，他的單位是dp，但在不同解析度上最後渲染出來的始終是1px的物理畫素

// 將布局大小(dp)轉換為畫素大小(px)，保證返回乙個整數
pixelratio.
getpixelsizeforlayoutsize
(dp)

解析度和畫素是什麼關係？

react native 解析度適配(px,dp)