之前我們產(chǎn)品里的啟動(dòng)頁比較簡單，就是背景色加上我們的logo、slogan等，這種形式適配起來比較容易，把元素切出來交給開發(fā)寫出來就行。最近由于運(yùn)營的需求，我們需要在APP啟動(dòng)頁展示廣告，廣告圖更新頻繁、樣式復(fù)雜，不可能交給開發(fā)適配，也不可能讓設(shè)計(jì)師每次手動(dòng)做多個(gè)尺寸（光想想就要抓狂），所以我開始思考用一個(gè)尺寸適配所有屏幕的方法。

確定基礎(chǔ)尺寸

我們主要適配的是Android和iPhone這兩個(gè)主流平臺，常見分辨率如下。

Android和iOS平臺常見分辨率

從上表可以看出，iPhone 5/5s、iPhone 6/7/8、iPhone 6/7/8 Plus都是等比例的，屏幕的長寬比大約是1.77；而Android目前最主流的1080P、720P也都是這個(gè)比例。所以，為了兼顧兩個(gè)平臺，我采用這個(gè)比例下的最大尺寸，即iPhone 6/7/8 Plus的1242*2204為基礎(chǔ)尺寸做圖，其他尺寸用這張圖去適配，這樣可以最大限度地讓盡可能多的屏幕完美顯示，同時(shí)在較高分辨率下又不至于模糊。

如何裁剪

想用一張圖適配不同尺寸的屏幕，圖片肯定會被裁剪，那么圖片是怎樣被裁剪的呢？

為了填滿屏幕的空間，圖片需要按照一定的比例去等比放大或縮小，縮放的中心點(diǎn)為圖片的中心點(diǎn)。當(dāng)遇到?長寬比?比自己大（即高瘦）的屏幕時(shí)，為了填滿屏幕高度，圖片需要放大到與屏幕等高的大小，此時(shí)就會裁剪掉圖片的左右兩側(cè)；而反過來，當(dāng)遇到?長寬比?比自己?。窗郑┑钠聊粫r(shí)，就會裁剪掉圖片上下超出的部分。如下圖示例。

簡而言之，由矮胖往高瘦適配，裁剪掉左右；反過來則裁剪掉上下。

圖片的裁剪方式

確定安全區(qū)域

確定了基礎(chǔ)尺寸，弄清楚了裁剪的規(guī)則，那我們可以在圖片上確定一塊「安全區(qū)域」。所謂「安全區(qū)域」，就是適配時(shí)確保不會被裁掉的區(qū)域，設(shè)計(jì)師在設(shè)計(jì)時(shí)可以把文字、logo、slogan等重要內(nèi)容安排在該區(qū)域內(nèi)，從而保證核心內(nèi)容不會被裁掉。

從上面的裁剪規(guī)則我們知道了，長寬比越小（越矮胖）的屏幕，上下部分會被裁剪得更多；長寬比越大（越高瘦）的屏幕，左右兩側(cè)則被裁剪得更多。因此，按照長寬比最小的屏幕尺寸和長寬比最大的屏幕尺寸，可以分別確定上下左右的裁剪邊界，邊界里的即為安全區(qū)域。

而在我們適配的范圍內(nèi)，長寬比最小的尺寸是320x480（mdpi，iPhone4），最大的是375x812（iPhoneX），因此最終確定的安全區(qū)域是1020x1863，如下圖所示。

確定安全區(qū)域

適配效果

最終同一張圖在各個(gè)分辨率下的適配效果如圖，為了方便查看，圖中對安全區(qū)域的四個(gè)角做了標(biāo)記。

同一張圖在各個(gè)分辨率下的適配效果

最后

如果你的啟動(dòng)頁除了展示廣告外，還需要固定展示品牌信息（如網(wǎng)易云音樂的啟動(dòng)頁，下面會固定有一塊區(qū)域展示logo、版權(quán)信息等），可以在下面留出固定比例的空間，如留出15%的高度，剩下的空間按照上面的方法確定尺寸和安全區(qū)域就好啦。