
伴隨著各種大小尺寸的行動裝置問世,對開發者來說,這也是另一個不得不克服的問題,尤其是如何讓應用程式支援更多螢幕尺寸或在各種平台使用,當然最好的方式是先鎖定最大、最廣泛使用族群,目前來說行動裝置為 iOS、Android,電腦則是 Windows 和 macOS 兩大作業系統。如果你是應用程式或軟體開發者,應該會需要一份包含各種主流裝置的技術細節。
好消息是 Google 已經幫我們整理好這些資料,從 Material Design 網站提供的「Device Metrics」工具可以找到詳細資訊。在 Device Metrics 頁面中收錄近年主流、使用者較多的行動裝置資訊,包括筆記型電腦、智慧型手機、平板電腦、穿戴裝置,例如常見的 iPhone、iPad、Macbook、Android Phone、Chromebook 等等。

網站提供的技術細節資料相當實用,例如平台(作業系統)、螢幕尺寸、長寬比、長度及寬度、像素密度(PPI),也有一些較進階深入的開發資訊,包括:材料指標(Material Metrics,主要是在一些指標和標線部分的對齊距離)、合適觸控範圍、物理密度,對開發者來說是非常實用的參考資訊,有需要就將網站加入書籤,隨時打開查詢確認吧!
網站名稱:Device Metrics
網站鏈結:https://material.io/devices/
使用教學
STEP 1
開啟 Google 的 Device Metrics 頁面後,可以從列表中看到許多目前主流的行動裝置,前面有提到包括筆記型電腦、平板電腦、智慧型手機或穿戴型裝置,點擊上方的各種項目來快速篩選排列,滑鼠游標移動上去還會變色,方便你對照資訊。
在列表中能查到這些裝置的名稱、類型、作業系統、螢幕尺寸、長寬比、長度及寬度和像素密度。

STEP 2
如果要取得更深入、細部的技術資訊,點擊裝置後會跳出更多細節,這部份就比較技術性了,可能對於開發者來說會有一定的參考價值吧!如果是平板電腦,還會有直立和橫放時的不同的尺寸規格。


Device Metrics 列表也收錄較常看到的 MacBook,包括 iMac、MacBook、MacBook Air 及 MacBook Pro 都有,Windows 筆電則有 Surface 系列。
