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

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

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

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

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

機型phys.
width
phys.
height
CSS
width
CSS
height
pixel
ratio
phys.
ppi
CSS
ppi
Apple iPhone 12 Pro Max128427784289263458288
Apple iPhone 12, 12 Pro117025323908443460288
Apple iPhone 12 mini112524363758123476288
Apple iPhone SE (2nd gen)75013343756672326192
Apple iPhone 11 Pro Max, XS Max124226884148963458288
Apple iPhone 11, XR82817924148962326192
Apple iPhone X, XS, 11 Pro112524363758123458288
Apple iPhone 7, iPhone 875013343756672326192
Apple iPhone 6+, 6S+, 7+, 8+108019204147363401288
Apple iPhone 6, 6S, SE275013343756672326192
Apple iPhone 5, SE64011363205682326192
Apple iPhone 46409603204802326192
Apple iPhone 3320480320480116396
Apple iPod Touch64011363205682326192
LG G5144025603606404538384
LG G4144025603606404538384
LG G3144025603606404538384
LG Optimus G76812803846402318192
Samsung Galaxy S8+144029603607404529384
Samsung Galaxy S8144029603607404568384
Samsung Galaxy S7, S7 edge144025603606404534384
Samsung Galaxy S6144025603606404577384
Samsung Galaxy S5108019203606403441288
Samsung Galaxy S4108019203606403441288
Samsung Galaxy S4 mini5409603606401.5256144
Samsung Galaxy S372012803606402306192
Samsung Galaxy S3 mini4808003205331.5233144
Samsung Galaxy S24808003205331.5217144
Samsung Galaxy S4808003205331.5233144
Samsung Galaxy Nexus72012003606002316192
Samsung Galaxy Note 8144029603607404521384
Samsung Galaxy Note 4144025603606404515384
Samsung Galaxy Note 3108019203606403386288
Samsung Galaxy Note 272012803606402267192
Samsung Galaxy Note80012804006402285192
OnePlus 6108022803847833402288
LG Nexus 5108019203606403445288
LG Nexus 476812803846402320192
Microsoft Lumia 1520108019204327682.5367240
Microsoft Lumia 102076812803204802.4332220
Microsoft Lumia 92576812803204802.4332220
Microsoft Lumia 92076812803204802.4332220
Microsoft Lumia 9004808003204801.5217144
Microsoft Lumia 83072012803204802294192
Microsoft Lumia 6204808003204801.5252144
Motorola Nexus 6144025604126903.5493336
HTC One108019203606403468288
HTC 8X72012803204803341288
HTC Evo 3D5409603606401.5256144
Sony Xperia Z3108019203605983424288
Sony Xperia Z108019203606403443288
Sony Xperia S72012803606402342192
Sony Xperia P5409603606401.5275144
Xiaomi Redmi Note 8T108023403937752.75409264
Xiaomi Redmi Note 5, 6108021603937392.75403264
Xiaomi Mi 4108019203606403441288
Xiaomi Mi 3108019203606403441288
Lenovo K900108019203606403401288
Pantech Vega n°6108019203606403373288
Blackberry Leap72012803906952294177
Blackberry Passport144014405045043453274
Blackberry Classic7207203903901.8294177
Blackberry Q107207203463462328192
Blackberry Z3072012803606402295192
Blackberry Z1076812803846402355192
Blackberry Torch 9800360480360480118796
ZTE Grand S108019203606403441288
ZTE Open (Firefox OS)4807203204801.5165144
資料來源:https://www.mydevice.io

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