關於移動段裝置物理畫素和css畫素的一點研究

2021-07-31 00:17:39 字數 1844 閱讀 7788

拿ip6為例

375 * 667指的到底是什麼?

答案: css邏輯解析度;

研究過程,我們把ip6的物理水平尺寸(也就是螢幕寬度)算出來:大概是5.9cm(尺子量的,不會特別精確),換算成in的話2.3228,先驗證ppi:官方給出的ppi是326,用1334/2.3228大致就是322,驗證成立。

接下來需要確定的點是我們的dpr是先有css邏輯畫素,還是我們先確定了dpr,然後再有邏輯畫素的確定。

css2.1的時候倒是建議了96ppi作為參考畫素,不過我看dpr=2的ip6的dpi是163,也不是96的兩倍。

當前總結下呢,我們書寫在css中的px,對應的都是css邏輯畫素,而css邏輯畫素呢,又不和實際的尺寸相對應,也就是16px,在實際中並不是16cm或者是16mm,而因為dpi的不同,就會導致我們書寫的css尺寸,並不會知道在實際中會看到多大。

ip6p: ip6p的ppi應該是沒什麼問題的,問題處在dpr上,這裡的dpr按照公式計算:1080/414 = 2.6並不是3哦。

這裡的問題就在於,我們如何在2.6個實際的畫素點上描繪出css單位中的1pt(畫素點),畢竟不可能投射到0.6個畫素點上去的。

我這裡給出的猜測是:直接當做3來,也就是直接投射到3個pt,這裡的原理估計是和scale一樣的,我們在使用scale的時候,scale計算後,必然也會導致乙個css點,對應到0.5個畫素點上去的結果,具體的實現這裡暫不研究,猜測就是四捨五入。

理想情況下:我們的ppi完全沒有必要達到401,保持326就行了,對於手持裝置,太高的ppi,肉眼也是無法分辨出區別的。

這裡對庫克為什麼會實現這種奇葩的方案做乙個推測:

1.首先我們需要先選定物理尺寸,先確定物理尺寸的寬和高

2.確定了這個尺寸後,我們需要考慮往這個尺寸裡面填充進多少的畫素點,先考慮dpi,最終希望達到的效果是怎麼樣的?是等比例把頁面放大呢?還是希望看到頁面上更多的內容(這裡指的都是橫向,以下相同),等比例放大必然不會是乙個好的方案,蘋果選擇的方案應該是保持dpi相等的情況下,往裡面塞入實際的物理畫素點(dpi相等,螢幕大了,我們就能看到更多的東西),但是完全相等也不符合乙個人的感官,應該是稍微字型稍微大一點,ip6的dpi是163,我們要在接近163的基礎上,減小一點。

dpi確定後,我們就可以在這個基礎上,填充進物理點了,但是要填多少呢?其實保持dpr=2的基礎就好了,這樣我們就能很方便的算出來dpr=2的基礎上的物理解析度(如果是163的dpi是878*1560),因為要比163小,所以,必然是比878*1560大的乙個不怎麼規則的數字。

如果這麼做的話,保持dpi減小的話,dpr又一致,就相當於我們的ppi減小了,其實我的觀點的話,300ppi和326ppi沒什麼差別,但是消費者不贊同啊,而且高的ppi必然是個噱頭,庫克是個商人,他需要告訴消費者我們的解析度是高的,我們的ppi更大,你們才有動力去買plus,所以我們這裡必須填充進比878*1560更大的乙個物理畫素點數,既然1920*1080是pc的乙個大眾接受的尺寸,那麼我們也把這個拿來用

為什麼不考慮更大的尺寸,來滿足dpr=3呢?因為耗電!

我們必須也得使得6sp的待機時間比6s大

於是就導致了現在的奇葩的dpr=2.6的情況

但是這個會影響嗎?

不會 具體的實現參考sacle,估計就是一樣的實現方案

如果賈伯斯在世,不可能會出現這種奇葩的dpr的,絕對的

我們書寫的css尺寸最終呈現在 移動裝置上具體的大小取決於dpi

大螢幕的dpi應該更小,但是物理畫素密度應該更大,這樣就導致了更大的dpr,這個dpr必然是需要四捨五入, 很多實際上2.5往上的dpr,都是當做dpr=3來計算的,這種四捨五入必然是會導致一些問題的,這個問題的研究放到後續,這個問題應該是scale會導致的問題是一樣的

怎麼理解物理畫素和CSS畫素?

很不理解這段話 後來隨著技術的發展,移動裝置的螢幕畫素密度越來越高,從iphone4開始,蘋果公司便推出了所謂的retina屏,解析度提高了一倍,變成640x960,但螢幕尺寸卻沒變化,這就意味著同樣大小的螢幕上,畫素卻多了一倍,這時,乙個css畫素是等於兩個物理畫素的。還有乙個因素也會引起css中...

關於CSS中的PX值(畫素)

場景 人物 前端實習生 阿樹 與 切圖工程師 玉鳳 事件 設計師出設計稿,前端實現頁面 玉鳳 樹,設計稿發給你啦,差那麼點畫素,就叼死你 阿樹 阿樹 哇靠,為啥你給的設計稿是640px寬 iphone 5不是320px寬嗎?玉鳳 a pixel is not a pixel is not a pix...

關於移動端畫素的一點探索,PX和ViewPort

不做處理的情況下,乙個375px寬 667px高的矩形 iphone5大小 在不同裝置的顯示。1 pc端,很大,就像乙個真正的iphone5 這時候css中的px,還挺正常的嘛 2 在iphone5中顯示 小了很多很多,明明都是320x568啊?iphone5的320x568是它自己的視口大小,和解...