UWP開發入門（六）——對多裝置不同分辨率顯示效果的讨論

　　本篇不涉及具體代碼，而是把實際開發UWP APP的過程中，遇到的不同裝置，不同分辨率顯示效果差異的問題進行讨論。希望能夠抛磚引玉，和各位擦出一些火花。

　　蜀黍我目前是在做一套牛逼的UWP APP啦，目标是能跑在各種尺寸不同，分辨率不同的PC，Phone和Tablet上。無論是從代碼的複雜度還是實作的難度來說，都隻希望維護一套代碼。

　　在項目的初始階段，美工MM對Tablet和Phone各設計了一套界面，在對UWP的Adaptive UI做了一些調研後，認為隻要保持界面元素大緻相同，以Phone為基準，在Tablet上做一個拉伸就可以了。

　　然而在實際開發過程中仍然發現了一些問題。話說美工MM的Phone按照640 x 480的分辨率設計，Tablet按照Surface Pro 3的2160 x 1440來設計。

　　

　　Tablet的話如上圖，SplitView布局，最左邊是Pane，然後中間再分兩塊内容區域。Phone的界面會藏起Pane，然後兩塊内容區域不再并排顯示。很常見的UI設計，你們都懂的啦。

　　首先這兩個螢幕的縱橫比是不一樣的，同時整體布局也有很大差異。從Phone到Tablet布局的整體切換呢，可以通過UWP新增的AdaptiveTrigger根據螢幕Width和Height來觸發更新布局的操作，問題不大。

　　但是具體到設定元素大小時就遇到困難了。一開始美工MM貼心的給了兩套Style……這在兩套Style切來切去代碼煩死人不說，這個使用者體驗也不好，視窗拖到一半東西突然Biu~的一聲變大了，怪吓人的……

　　那麼我們就要确定一套Style為基準，同樣的fontSize，同樣的元素尺寸。結果問題出現了，以Tablet 2160 x 1440的設計稿為基準做出來的程式，在1080p的PC和480p的手機上都顯得碩大無比，所有元素都給打了激素一樣。

　　緊急叫停之後，我們告訴美工MM用1080p的分辨率來做Tablet。然後就發現Tablet看上去正常了，但480p的Phone上仍然慘不忍睹碩大無比。同樣的100px的長度，在Tablet和Phone上竟然不一緻。使用Live Tree Explorer測量螢幕的大小發現，Phone的元素尺寸會有一個對應的縮放比例：

分辨率

螢幕尺寸

實際長度

比列

640 x   480

4

533.33   x 320

1.5 ： 1

1280 x   720

5

640 x   360

2： 1

1920 x   1080

6

768 x   431

2.5 ： 1

　　也就是480p的Phone實際Width隻有320px。我們以480px的Width設計出來的界面，實際比1080p的Lumia 1520真實Width 431px還要大。

　　但是這個縮放比列卻又對文字無效，無效……無效……，fontSize寫了多大，在各種螢幕上都是一個尺寸。當時蜀黍感覺蛋都要碎了。2015年12月31日啊，蜀黍破天荒的加班了啊，因為第二年要給其他兄弟還有美工MM一個交代啊！

　　苦思冥想啊，白頭發都多了好幾根……最終還是決定把問題簡單粗暴化，采用640 x 460來設計Phone，即以720p的Phone為基準。之是以舍棄480p是考慮lumia 530之類的老舊裝置即将淘汰，Win10m最低端的Lumia 550也是720p了。

　　然後保持Phone 720p設計稿上的元素和字型大小不變，平移到1080p的Tablet畫布上再次進行布局。基本就等于将兩份640 x 360大小的手機螢幕左右放置到1920 x 1080的Tablet上。再做一些間距的調整，實際效果經多方研究表示可以接受。

　　如果使用者使用了480p的低端Phone和1366 x 768的古董PC，那看上去的元素大小會稍稍放大。好在720p相對480p的跨度較小，理論上字元串和圖檔被截斷的可能性不大。

　　當使用者使用了1080p以上的Phone和Surface Pro 4這樣的Tablet，元素會顯得更為細小精緻，但針對觸摸優化的UI絕對比視網膜屏MacBook上針對鍵鼠的軟體來的要大。每次看公司同僚的MacBook螢幕感覺我眼睛都要瞎了……（順便黑一下，他們經常去修Mac……品質麼……）

　　那麼本篇就到這裡，雖然寫得簡單了點，但你真要寫跨裝置多分辨的UWP APP，嘿嘿還是從頭再好好看一遍吧……

　　另外打個廣告，後面打算延續本篇的讨論，針對具體頁面或控件給出執行個體分析，到時候要來點贊哦。當然我也可能挖坑不填……謝謝