移動設(shè)備分辨率適配及相關(guān)問題

基本知識

px（pixel）的意思是像素。像素是一個虛擬的方格，是數(shù)字顯示屏的一個基本單位。像素沒有物理上的尺寸，一個像素可以和一幅海報一樣大，也可以小的連肉眼都無法分辨。 in（inch）是英寸，是計算數(shù)字顯示設(shè)備（手機(jī)，顯示屏）的長度單位，是物理上的尺寸。1 inch≈2.54cm. 通過計算某個顯示設(shè)備中像素和英寸的比值，就可以得到每英寸中的像素數(shù)（pixels per inch），也就是PPI，你也可以叫它像素密度（pixel density）。PPI在理解上可以與物理上的密度進(jìn)行類比，物理密度=質(zhì)量/體積，PPI=像素/英寸。計算方式在此不表。

PPI有兩個作用：

1.PPI越高的顯示設(shè)備，單位長度下顯示的像素點就越多，看起來也就越清晰。 2.PPI將虛擬單位和物理單位結(jié)合在一起，使得「清晰」的概念明確起來。路人甲給我一個分辨率為1920*1080px的設(shè)備，路人乙給我一個5寸的設(shè)備，哪個更清晰？不知道。他們給的設(shè)備都無法計算出PPI，無法對比。 那么DPI又是什么？PPI是數(shù)字設(shè)備上的DPI。也就說，這兩者其實是一回事兒，只是適用的情況不同。DPI（dots per inch）指的是每英寸的點數(shù)，在印刷行業(yè)應(yīng)用廣泛，指的是每英寸的油墨點數(shù)。它表示的意義和PPI一樣，是為了表示單位上長度下有多少個基本單位，那么顯示屏上的基本單位是px，而在印刷品上的基本單位是dot。這兩種說法本來針對不同情況，但在實際使用中卻是混亂的，你懂意思就行。

iPhone的分辨率

說起iPhone的分辨率，就必須牽扯到另外一個單位，pt. 在iPhone 3GS及以前的iPhone，pt和px是一一對應(yīng)的關(guān)系，即1pt=1px，邏輯分辨率為320*480pt，渲染像素即為320px*480px，加上3.5寸的屏幕，計算得出像素密度是163PPI。 隨著iPhone 4一起推出的retina屏（視網(wǎng)膜屏），提高了顯示屏的精細(xì)程度，改變了pt和px之間的關(guān)系，1pt=2px。由于邏輯分辨率還是320pt*480pt，從「面積」的角度上來說，原來1個邏輯像素點里有1個渲染像素，現(xiàn)在有4個渲染像素。以iPhone 3GS（左）和iPhone 4（右）舉例，右邊是尺寸為244px*640px，左邊為122px*320px，兩者置于同為3.5寸屏幕下，并且在屏幕中所占面積相同。得出retina屏幕在單位面積下容納的渲染像素更多，也就越清晰。由此，iPhone設(shè)備的PPI由原來的163PPI變?yōu)?26PPI，清晰度大幅提升。

如果以iPhone 3GS中px和pt的對比關(guān)系作為基準(zhǔn)1x，那么iPhone 4中px和pt的關(guān)系即為2x。這實際上是PPI的簡化表達(dá)方式，這樣的表示使得開發(fā)人員不用去記住163和326這樣的數(shù)字，僅限iOS，Android后面再說。

iPhone 4s在屏幕顯示的情況和iPhone 4一樣。

接著是iPhone 5和5s，5c。iPhone 5的邏輯分辨率寬度上依然是320pt，高度變?yōu)?68pt，渲染像素變?yōu)?40px*1136px，視覺上最直接的就是iPhone的屏幕上多了一排圖標(biāo)。尺寸上由3.5寸變?yōu)?寸（對角線）。如果你還記得當(dāng)時嘲弄iPhone 5的段子，那么肯定對iPhone 10神一般的長度記憶猶新。 依然保持2x的好處是原來為iPhone 4和4s設(shè)計的控件和圖標(biāo)可以原封不動地直接挪到iPhone5上使用，因為PPI沒有改變。改變的是長度變大了，縱向上可容納的內(nèi)容增加了。

iPhone 6及iPhone 6s在保持2x的情況下，根據(jù)屏幕比例4/4.7=320/375=568/667，邏輯分辨率依照5的比例變?yōu)?75pt*667pt，渲染像素變?yōu)?50px*1334px。同樣，在2x的情況下，依然可以沿用4s和5s的控件和圖標(biāo)。屏幕變大，可容納的內(nèi)容增多。

但是好景不長，分辨率的比例在iPhone 6P這里發(fā)生了很大的改變，可以說是開發(fā)人員的噩夢。iPhone 6P如果依然使用和其他型號相同的像素密度進(jìn)行渲染，那它的邏輯分辨率應(yīng)該是438pt* 780pt（667/780=375/438=4.7/5.5），在2x情況下渲染像素應(yīng)該是796px*1560px。但這一分辨率對于一個5.5寸的設(shè)備來說太小了，于是蘋果為iPhone 6P設(shè)計了不同的渲染模式：稍微縮小了邏輯分辨率到414pt*736pt（按照比例是5.2寸屏的邏輯分辨率），然后以三倍方式渲染（@3x），也就是渲染像素是1242px*2208px。這樣一來，本該在5.2寸上顯示的像素被等比例拉大到5.5寸上。緊接著，出于對電池和屏幕亮度的考量，在渲染完成后，經(jīng)過一個降分辨率的步驟，將圖像輸出到物理像素為1080px*1920px的屏幕上。

這樣先放大后縮小之后有兩個后果：

1.@2x和@1x可以有兩種理解。 其一是163PPI為基數(shù)的倍數(shù)，它們所代表的是PPI。@1x下PPI為163，@2x下PPI為326，那么3x下應(yīng)該為489PPI，正好對應(yīng)5.2寸下414pt*726pt的情況。從5.2寸拉到5.5寸后PPI降低為460PPI，之后降低渲染分辨率為1080px*1920px，PPI進(jìn)一步降低為401PPI。從這個角度上來說@3x的意義已經(jīng)不在了。 其二是在同一個邏輯分辨率里有多少個渲染的像素點，@1x代表一個邏輯像素內(nèi)有1個渲染像素，@2代表有4個，@3x代表9個。這種意義依然存在。

2.從1242px*2208px降分辨率為1080px*1920px以后，出現(xiàn)了亞像素，就連系統(tǒng)控件也一樣。不過這情況在顯示屏上看才能觀察到，截屏下來在PS內(nèi)查看依然是1242px*2208px。

根據(jù)之前所述，一個圖標(biāo)在@1x和@2x下的設(shè)備上顯示的肉眼大小是一樣的，唯一不同的是變清晰了。在理想的5.2寸和@3x情況下，圖標(biāo)肉眼大小和@2x也是一樣的，放大到5.5寸的屏幕上以后，假設(shè)原來的一個圖標(biāo)在設(shè)備上肉眼放大的倍數(shù)為:

1*（5.5/5.2）≈1.05

所以如果在750px*1334px的設(shè)計稿上畫了一個圖標(biāo)，同時切了@2x和@3x的圖，分別放在iPhone 6和iPhone 6p上，iPhone 6p上的圖標(biāo)會比iPhone 6上的大1.05倍左右（相信我，我拿尺子量過）。 那降分辨率為1080px*1920px的怎么沒有算進(jìn)去？這是重點。降分辨率的那部分與設(shè)計師無關(guān)，反正作為設(shè)計師是用1242px*2208px的稿子做設(shè)計。至于為什么降分辨率了圖標(biāo)沒有相應(yīng)變小，這是蘋果系統(tǒng)層面的上的顯示問題，我，并沒有搞懂。

關(guān)于iPhone的適配，切圖和標(biāo)注

在開發(fā)時間和資金都有限的情況下，通常情況是用一套設(shè)計稿適配所有的機(jī)型（包括iOS的各種機(jī)型，以及Android的各種機(jī)型）。國內(nèi)的普遍情況是遵循蘋果公司的Human Interface Guidelines出一套iOS設(shè)計稿，調(diào)節(jié)尺寸，切出不同的圖進(jìn)行適配。用iOS風(fēng)格的設(shè)計稿挪到Android平臺上向來有很多爭議，比如iOS常用的tab導(dǎo)航，用于有虛擬鍵的Android手的結(jié)果是繁復(fù)和丑陋；而另一方面tab導(dǎo)航相比于Android上的更常見的Drawer導(dǎo)航，更有利于提高用戶活躍度。Anyway，用iOS的設(shè)計是主流。

所以，怎么做到一套設(shè)計稿適配作用機(jī)型？

1.以750px作為基本設(shè)計稿，向下適配640px（看起來會偏大一點點），向上適配1242px。

2.用cutterman（或者其他切圖軟件）切圖切出@2x，和@3x。用@2x的切圖應(yīng)用于iPhone 6以下的機(jī)型，用@3x的切圖應(yīng)用于iPhone 6p。@3x與@2x的圖是嚴(yán)格的1.5倍關(guān)系。（或者，為了避免750px切出的@3x有虛邊，將750px的圖等比例拉大1.5倍，得到1125px*2001px，檢視圖標(biāo)的清晰情況，需要調(diào)整就微調(diào)，切出@3x的圖）

3.用750px的圖做標(biāo)注。建議用單位pt做標(biāo)注，便于開發(fā)。

適配規(guī)則（來自知乎）[1]

總結(jié)起來就一句話：文字流式，控件彈性，圖片等比縮放。

控件彈性指的是，navigation、cell、bar等適配過程中垂直方向上高度不變；水平方向?qū)挾茸兓瘯r，通過調(diào)整元素間距或元素右對齊的方式實現(xiàn)自適應(yīng)。這樣屏幕越大，在垂直方向上可以顯示更多內(nèi)容，發(fā)揮大屏幕的優(yōu)勢。

按照上述默認(rèn)適配規(guī)則，大中小三種屏幕顯示效果均相同。有時候想在大屏幕顯示更多內(nèi)容，需要設(shè)計出特殊適配效果。比如App store首頁焦點圖，從iPhone 6適配到iPhone 6 plus時焦點圖尺寸和排版做了特殊處理。底下應(yīng)用列表也從一排3+個變成一排4+個，真正實現(xiàn)了大屏幕顯示更多內(nèi)容的理念。這些就需要設(shè)計師給出相應(yīng)設(shè)計稿。

其他方案

1.如果以640px的圖作為設(shè)計稿，適配750px和1242px看起來都會偏小一點點。

2.如果腦洞打開以1242px的圖作為設(shè)計稿，那么問題就特么的來了。

按照道理，在1242上切出@3x的圖用于6p，切出@2x的圖用于6和5s/5/4s。但是情況是，由于6p的邏輯分辨率（414pt）寬度上比4s和5（320pt）上的大很多，切出@2x用于750的寬度沒有問題，用于640px大小上可能會過大。高度上也一樣，原來在6p上可以呈現(xiàn)5欄的內(nèi)容，在5和4s上很可能只有三欄。因此，有人提出的方案是將6p的尺寸等比例縮放1242/640倍，這顯然違反了本文的初衷。實為無奈之舉。

一些問題

1.為什么用于@3x的切圖是@2x的1.5倍，而不是1242px/750px倍？或者不是1242px/640px倍？ 因為6p的界面并不是6或者5s的等比例放大關(guān)系。理論上來說，大屏有兩個作用：

1.原來的顯示內(nèi)容變得更大。

2.顯示更多的內(nèi)容。

若是切圖按照1242px/750px的倍數(shù)等比例放大，是縱向上是沒法顯示更多內(nèi)容的。違背大屏的設(shè)計原則。

2.為什么750px切下來的@2x可以適用于640px，而不是等比例縮小750px/640px倍？ 因為都是@2x，也不是等比例縮小。750px的圖標(biāo)以及控件都和640px的一樣大，但是屏幕大了，容納的東西多了。

適配Android

這個問題我暫時沒有很好的解決方案，只能說說我現(xiàn)行的方法。

和iOS上一樣，Android上有一個和pt類似的單位，dp（或dip），指device independent pixel。

以MDPI為基準(zhǔn)，XHDPI即是Android的@2x。XHDPI下，1dp=2px。 以750px的設(shè)計稿，等比例縮小為720px，高度變?yōu)?281px，多出1px。以XHDPI的模式切圖。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章名稱：移動設(shè)備分辨率適配及相關(guān)問題
文章位置：http://www.bm7419.com/news5/323855.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、搜索引擎優(yōu)化、用戶體驗、企業(yè)建站、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)