設計自適應網站，必了解的螢幕解析度

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

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

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

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

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

Apple 產品

Android 產品

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