在設計自適應網站時,我們除了要知道什麼是 Viewport 之外,還要了解各種用來瀏覽網站的裝置,他的實際螢幕解析度到底是什麼?
桌機/筆電的螢幕解析比較單純,現在大家普遍使用的是 22-24 吋的螢幕,幾乎解析度都會使用 1080p(1920×1080像素) 的 16:9 比例規格,不過因為寬扁畫面的關係,所以如果我們設計的網站,是照著這個解析去設計的話,瀏覽者的眼睛得從左到右才能觀看網站的區塊資訊,如果還有按鈕連結,滑鼠的移動距離也會拉得很遠,容易造成視覺疲勞與操作不順暢,因此我們建議在桌機上的網站,盡量維持在寬度 1024 – 1280 像素這個區間,將網站資訊區塊集中在視窗中間,較能夠讓訪客便利瀏覽與操作。
平板電腦的解析度,其實跟桌機雷同,尺寸不會有太多變話,因此我們將網站寬度設定在 768 – 1024 之間,就可以涵蓋目前市面上所有主流平板的螢幕解析度。
手機上的畫面螢幕,其實才是現在最重要,但也最令人頭疼的一塊,因為我們必需考量到自手機可以上網以來,與發展至現今的全螢幕顯示,這中間的尺寸變化,龜毛的設計師一定都會考量自適應的視覺畫面,網站資訊是否會因為螢幕太小或太大,造成版面不和諧。
因為手機螢幕寬度小,雖然可能寬度才差一點點,但其實足以影響整體感覺,因此我們歸納出目前市面熱門的手機/平板的實際瀏覽解析度,讓大家可以在設計自適應網站時可以參考,寬度大概分成下列幾種:320, 360, 372, 375, 412, 414, 480 像素等,機型對應如下:
Apple 產品
Pixel Size | Viewport | |
iPhone | ||
iPhone XR | 828 x 1792 | 414 x 896 |
iPhone XS | 1125 x 2436 | 375 x 812 |
iPhone XS Max | 1242 x 2688 | 414 x 896 |
iPhone X | 1125 x 2436 | 375 x 812 |
iPhone 8 Plus | 1080 x 1920 | 414 x 736 |
iPhone 8 | 750 x 1334 | 375 x 667 |
iPhone 7 Plus | 1080 x 1920 | 414 x 736 |
iPhone 7 | 750 x 1334 | 375 x 667 |
iPhone 6 Plus/6S Plus | 1080 x 1920 | 414 x 736 |
iPhone 6/6S | 750 x 1334 | 375 x 667 |
iPhone 5 | 640 x 1136 | 320 x 568 |
iPod | ||
iPod Touch | 640 x 1136 | 320 x 568 |
iPad | ||
iPad Pro | 2048 x 2732 | 1024 x 1366 |
iPad Third & Fourth Generation | 1536 x 2048 | 768 x 1024 |
iPad Air 1 & 2 | 1536 x 2048 | 768 x 1024 |
iPad Mini 2 & 3 | 1536 x 2048 | 768 x 1024 |
iPad Mini | 768 x 1024 | 768 x 1024 |
Android 產品
Pixel Size | Viewport | |
Phones | ||
Nexus 6P | 1440 x 2560 | 412 x 732 |
Nexus 5X | 1080 x 1920 | 412 x 732 |
Google Pixel 3 XL | 1440 x 2960 | 412 x 847 |
Google Pixel 3 | 1080 x 2160 | 412 x 824 |
Google Pixel 2 XL | 1440 x 2560 | 412 x 732 |
Google Pixel XL | 1440 x 2560 | 412 x 732 |
Google Pixel | 1080 x 1920 | 412 x 732 |
Samsung Galaxy Note 9 | 1440 x 2960 | 360 x 740 |
Samsung Galaxy Note 5 | 1440 x 2560 | 480 x 853 |
LG G5 | 1440 x 2560 | 480 x 853 |
One Plus 3 | 1080 x 1920 | 480 x 853 |
Samsung Galaxy S9+ | 1440 x 2960 | 360 x 740 |
Samsung Galaxy S9 | 1440 x 2960 | 360 x 740 |
Samsung Galaxy S8+ | 1440 x 2960 | 360 x 740 |
Samsung Galaxy S8 | 1440 x 2960 | 360 x 740 |
Samsung Galaxy S7 Edge | 1440 x 2560 | 360 x 640 |
Samsung Galaxy S7 | 1440 x 2560 | 360 x 640 |
Tablets | ||
Nexus 9 | 1536 x 2048 | 768 x 1024 |
Nexus 7 (2013) | 1200 x 1920 | 600 x 960 |
Samsung Galaxy Tab 10 | 800 x 1280 | 800 x 1280 |
Chromebook Pixel | 2560 x 1700 | 1280 x 850 |
參考資料
https://www.mydevice.io
https://material.io/resources/devices/