各種行動裝置的螢幕尺寸/解析度 – Different screen sizes of mobile devices

隨著數位裝置的多樣化,螢幕尺寸比例已經成為了軟體開發上的重點跟難題,響應式網頁也是因應而生。 這次我遭遇的類似問題有兩個:

  1. 網頁在手機上的配置顯示為電腦版本,導致使用上的不順。
  2. 使用Unity做App的開發上遇到不同的螢幕比例,UI介面甚至動畫物件的錯亂。

相信許多開發者都能理解,開發響應式網頁時,使用 Bootstrap 的 Grid system 的方便。它也是我初次接觸響應式網頁時,令我快速了解何謂響應式網頁及其開發原理。

但是隨著行動裝置大廠間的軍備競賽不斷地進行,現在手機螢幕的解析度已經到了一個相當誇張的地步,下表是 Bootstrap 對於螢幕寬度的分類:

boostrap

依照上表,HTC M8 (1920 x 1080) 的5吋螢幕會被歸類為 Medium devices Desktops,也就是小型桌上型電腦的螢幕配置。如此一來最直接的結果就是,網頁在手機上的按鈕等物件過小。

同理,手機App的開發也是要考慮螢幕尺寸來進行。手機與平板的螢幕比例不同,造成Unity開發上有更多小細節要處理,還要擔心有特殊的情況考慮不周,為此我收集了一些行動裝置的螢幕尺寸/解析度,做為紀錄與研究筆記。

table-mobile-screensize

螢幕比例的問題,手機大致就固定為 1.78 (16:9) ,而平板為 1.33 (4:3) 與 1.6,在App的UI設計上需要去考量。

而響應式網頁要如何配合這雜亂無章的解析度與螢幕尺寸,我想還要頭痛一陣子了…

Advertisements

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s