在設計自適應網站時,我們除了要知道什麼是 Viewport 之外,還要了解各種用來瀏覽網站的裝置,他的實際螢幕解析度到底是什麼?

桌機/筆電的螢幕解析比較單純,現在大家普遍使用的是 22-24 吋的螢幕,幾乎解析度都會使用 1080p(1920×1080像素) 的 16:9 比例規格,不過因為寬扁畫面的關係,所以如果我們設計的網站,是照著這個解析去設計的話,瀏覽者的眼睛得從左到右才能觀看網站的區塊資訊,如果還有按鈕連結,滑鼠的移動距離也會拉得很遠,容易造成視覺疲勞與操作不順暢,因此我們建議在桌機上的網站,盡量維持在寬度 1024 – 1280 像素這個區間,將網站資訊區塊集中在視窗中間,較能夠讓訪客便利瀏覽與操作。

平板電腦的解析度,其實跟桌機雷同,尺寸不會有太多變話,因此我們將網站寬度設定在 768 – 1024 之間,就可以涵蓋目前市面上所有主流平板的螢幕解析度。

手機上的畫面螢幕,其實才是現在最重要,但也最令人頭疼的一塊,因為我們必需考量到自手機可以上網以來,與發展至現今的全螢幕顯示,這中間的尺寸變化,龜毛的設計師一定都會考量自適應的視覺畫面,網站資訊是否會因為螢幕太小或太大,造成版面不和諧。

因為手機螢幕寬度小,雖然可能寬度才差一點點,但其實足以影響整體感覺,因此我們歸納出目前市面熱門的手機/平板的實際瀏覽解析度,讓大家可以在設計自適應網站時可以參考,寬度大概分成下列幾種:320, 360, 372, 375, 412, 414, 480 像素等,機型對應如下:


Apple 產品

Pixel SizeViewport
iPhone
iPhone XR828 x 1792414 x 896
iPhone XS1125 x 2436375 x 812
iPhone XS Max1242 x 2688414 x 896
iPhone X1125 x 2436375 x 812
iPhone 8 Plus1080 x 1920414 x 736
iPhone 8750 x 1334375 x 667
iPhone 7 Plus1080 x 1920414 x 736
iPhone 7750 x 1334375 x 667
iPhone 6 Plus/6S Plus1080 x 1920414 x 736
iPhone 6/6S750 x 1334375 x 667
iPhone 5640 x 1136320 x 568
iPod
iPod Touch640 x 1136320 x 568
iPad
iPad Pro2048 x 27321024 x 1366
iPad Third & Fourth Generation1536 x 2048768 x 1024
iPad Air 1 & 21536 x 2048768 x 1024
iPad Mini 2 & 31536 x 2048768 x 1024
iPad Mini768 x 1024768 x 1024


Android 產品

Pixel SizeViewport
Phones
Nexus 6P1440 x 2560412 x 732
Nexus 5X1080 x 1920412 x 732
Google Pixel 3 XL1440 x 2960412 x 847
Google Pixel 31080 x 2160412 x 824
Google Pixel 2 XL1440 x 2560412 x 732
Google Pixel XL1440 x 2560412 x 732
Google Pixel1080 x 1920412 x 732
Samsung Galaxy Note 91440 x 2960360 x 740
Samsung Galaxy Note 51440 x 2560480 x 853
LG G51440 x 2560480 x 853
One Plus 31080 x 1920480 x 853
Samsung Galaxy S9+1440 x 2960360 x 740
Samsung Galaxy S91440 x 2960360 x 740
Samsung Galaxy S8+1440 x 2960360 x 740
Samsung Galaxy S81440 x 2960360 x 740
Samsung Galaxy S7 Edge1440 x 2560360 x 640
Samsung Galaxy S71440 x 2560360 x 640
Tablets
Nexus 91536 x 2048768 x 1024
Nexus 7 (2013)1200 x 1920600 x 960
Samsung Galaxy Tab 10800 x 1280800 x 1280
Chromebook Pixel2560 x 17001280 x 850


參考資料
https://www.mydevice.io
https://material.io/resources/devices/