從初代iPhone 到 iPhone 3GS赃蛛,iPhone系列堅(jiān)守 320 x 480 像素稽亏。開(kāi)發(fā)人員采用絕對(duì)定位及像素模式進(jìn)行處理论熙。但是 iPhone 4之后就發(fā)生了改變,iPhone 4 采用Retina顯示屏眼刃。即當(dāng)前物理尺寸不變绕辖,但像素成倍增加,變成了640x960像素擂红。
為了避免同行出現(xiàn)的大坑(屏幕適配難)仪际,蘋(píng)果對(duì)開(kāi)發(fā)人員提出了point (點(diǎn)) 的概念。(以一維方式進(jìn)行探究)
1 在iPhone 3GS中, 1 個(gè)點(diǎn) 等于 1 個(gè)像素
2 在以后的設(shè)備中(非iPhone 6+/6s+/7+/8+/X) ,1個(gè)點(diǎn)等于2個(gè)像素?
3 iPhone?6+/6s+/7+/8+/X?中 ,1個(gè)點(diǎn)等于3個(gè)像素
這樣用戶在使用iPhone4 的時(shí)候昵骤,會(huì)感覺(jué)比iPhone 3GS 更加細(xì)膩树碱。
由此,我們需要對(duì)市面上的一些單位及術(shù)語(yǔ)進(jìn)行相關(guān)的總結(jié):
1 英寸: 作為手機(jī)屏幕對(duì)角線的物理長(zhǎng)度的單位变秦。如 iPhone 8 Plus 為5.5英寸成榜。
2 像素: 可以想象成屏幕上真正用來(lái)顯示顏色的發(fā)光小點(diǎn)。如 iPhone 8 Plus 為?1080x1920 像素蹦玫。
3 點(diǎn): ? ?針對(duì)開(kāi)發(fā)人員赎婚,開(kāi)發(fā)App時(shí)候用的單位,是一個(gè)虛擬的單位樱溉,用于屏蔽各個(gè)設(shè)備屏幕像素的不同挣输,兼容以前的程序。
4 ppi(pixel per inch): 每英寸有多少個(gè)像素福贞。 iPhone 4 的屏幕是??640x960像素撩嚼,3.5英寸。那么根據(jù)勾股定理肚医,對(duì)角線應(yīng)該有 1154個(gè)像素绢馍,轉(zhuǎn)換一下也就是 1154/3.5 = 330pi, 官方給出的數(shù)字是 326 ppi。
5 Retina屏: Retina翻譯過(guò)來(lái)是視網(wǎng)膜肠套。當(dāng)像素太密超過(guò) 300ppi的時(shí)候舰涌,人眼就不能夠區(qū)分出每個(gè)像素,因此 iPhone 4以后的屏幕都是Retina屏你稚。
6 文字瓷耙、顏色等矢量數(shù)據(jù) 放大是不會(huì)失真的。但是圖片并非矢量數(shù)據(jù)刁赖,直接使用會(huì)產(chǎn)生問(wèn)題搁痛。因此蘋(píng)果對(duì)它采用不同的處理方式。
假設(shè)example.png 為 30x40 像素 (這里的單位為像素宇弛,數(shù)字圖片的單位基本都為像素)鸡典。當(dāng)example.png在 iPhone 3GS和 iPhone 4中使用的時(shí)候,都占據(jù)屏幕30x40個(gè)點(diǎn)枪芒。而iPhone 4中 1 個(gè)點(diǎn)等于 2 個(gè)像素彻况,也就是30x40像素的圖片谁尸,占據(jù)了60x80 像素的屏幕,因此這圖片在iPhone 4中看起來(lái)會(huì)模糊纽甘。
為了對(duì)圖片進(jìn)行適配良蛮,需要準(zhǔn)備三張內(nèi)容相同的圖片,放在同一目錄下悍赢。
example.png???????????? // 30x40 像素
example@2x.png??????// 60x80 像素
example@3x.png??????// 90x120 像素?
當(dāng)程序中使用圖片時(shí)决瞳,會(huì)根據(jù)屏幕模式自動(dòng)選擇對(duì)應(yīng)的圖片。 屏幕1x模式左权,就會(huì)選擇example.png皮胡。 2x就會(huì)優(yōu)先選擇example@2x.png,假如example@2x.png不存在時(shí)涮总,就會(huì)降級(jí)選擇example.png胸囱。屏幕3x模式同理屏幕2x模式的降級(jí)選擇祷舀。
附表?(至2017-11-06以來(lái)瀑梗,iPhone 系列設(shè)備參數(shù)表)
(注: iPhone 6+/6s+/7+/8+?渲染像素與設(shè)備分辨率不一致,iPhone 3GS/6+/6s+/7+/8+/X除外裳扯,其他所有iPhone的ppi是一致的抛丽,都是326,用@2x的素材饰豺。
但是6+/6s+/7+/8+的實(shí)際ppi是401亿鲜,理論上蘋(píng)果應(yīng)該用401/326 * @2x=@2.46x的素材。但是這個(gè)奇葩的比例對(duì)UI美工而言很難切圖冤吨。所以蘋(píng)果為方便開(kāi)發(fā)者用的是@3x的素材蒿柳,然后再縮放到@2.46x上,實(shí)際上是縮放到2.46/3=83%漩蟆。實(shí)際上蘋(píng)果選取了一個(gè)接近比例的87%垒探。
這樣算下來(lái),物理分辨率和虛擬分比率的比例是87%怠李,也就是1920/0.87=2208圾叼,1080/0.87=1242 。
好處就是開(kāi)發(fā)者更方便捺癞,比如準(zhǔn)備素材時(shí)夷蚊,字號(hào)可以直接調(diào)成3x的。)