在設計自適應網站時，我們除了要知道什麼是 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 Max | 1284 | 2778 | 428 | 926 | 3 | 458 | 288 |
| Apple iPhone 12, 12 Pro | 1170 | 2532 | 390 | 844 | 3 | 460 | 288 |
| Apple iPhone 12 mini | 1125 | 2436 | 375 | 812 | 3 | 476 | 288 |
| Apple iPhone SE (2nd gen) | 750 | 1334 | 375 | 667 | 2 | 326 | 192 |
| Apple iPhone 11 Pro Max, XS Max | 1242 | 2688 | 414 | 896 | 3 | 458 | 288 |
| Apple iPhone 11, XR | 828 | 1792 | 414 | 896 | 2 | 326 | 192 |
| Apple iPhone X, XS, 11 Pro | 1125 | 2436 | 375 | 812 | 3 | 458 | 288 |
| Apple iPhone 7, iPhone 8 | 750 | 1334 | 375 | 667 | 2 | 326 | 192 |
| Apple iPhone 6+, 6S+, 7+, 8+ | 1080 | 1920 | 414 | 736 | 3 | 401 | 288 |
| Apple iPhone 6, 6S, SE2 | 750 | 1334 | 375 | 667 | 2 | 326 | 192 |
| Apple iPhone 5, SE | 640 | 1136 | 320 | 568 | 2 | 326 | 192 |
| Apple iPhone 4 | 640 | 960 | 320 | 480 | 2 | 326 | 192 |
| Apple iPhone 3 | 320 | 480 | 320 | 480 | 1 | 163 | 96 |
| Apple iPod Touch | 640 | 1136 | 320 | 568 | 2 | 326 | 192 |
| LG G5 | 1440 | 2560 | 360 | 640 | 4 | 538 | 384 |
| LG G4 | 1440 | 2560 | 360 | 640 | 4 | 538 | 384 |
| LG G3 | 1440 | 2560 | 360 | 640 | 4 | 538 | 384 |
| LG Optimus G | 768 | 1280 | 384 | 640 | 2 | 318 | 192 |
| Samsung Galaxy S8+ | 1440 | 2960 | 360 | 740 | 4 | 529 | 384 |
| Samsung Galaxy S8 | 1440 | 2960 | 360 | 740 | 4 | 568 | 384 |
| Samsung Galaxy S7, S7 edge | 1440 | 2560 | 360 | 640 | 4 | 534 | 384 |
| Samsung Galaxy S6 | 1440 | 2560 | 360 | 640 | 4 | 577 | 384 |
| Samsung Galaxy S5 | 1080 | 1920 | 360 | 640 | 3 | 441 | 288 |
| Samsung Galaxy S4 | 1080 | 1920 | 360 | 640 | 3 | 441 | 288 |
| Samsung Galaxy S4 mini | 540 | 960 | 360 | 640 | 1.5 | 256 | 144 |
| Samsung Galaxy S3 | 720 | 1280 | 360 | 640 | 2 | 306 | 192 |
| Samsung Galaxy S3 mini | 480 | 800 | 320 | 533 | 1.5 | 233 | 144 |
| Samsung Galaxy S2 | 480 | 800 | 320 | 533 | 1.5 | 217 | 144 |
| Samsung Galaxy S | 480 | 800 | 320 | 533 | 1.5 | 233 | 144 |
| Samsung Galaxy Nexus | 720 | 1200 | 360 | 600 | 2 | 316 | 192 |
| Samsung Galaxy Note 8 | 1440 | 2960 | 360 | 740 | 4 | 521 | 384 |
| Samsung Galaxy Note 4 | 1440 | 2560 | 360 | 640 | 4 | 515 | 384 |
| Samsung Galaxy Note 3 | 1080 | 1920 | 360 | 640 | 3 | 386 | 288 |
| Samsung Galaxy Note 2 | 720 | 1280 | 360 | 640 | 2 | 267 | 192 |
| Samsung Galaxy Note | 800 | 1280 | 400 | 640 | 2 | 285 | 192 |
| OnePlus 6 | 1080 | 2280 | 384 | 783 | 3 | 402 | 288 |
| LG Nexus 5 | 1080 | 1920 | 360 | 640 | 3 | 445 | 288 |
| LG Nexus 4 | 768 | 1280 | 384 | 640 | 2 | 320 | 192 |
| Microsoft Lumia 1520 | 1080 | 1920 | 432 | 768 | 2.5 | 367 | 240 |
| Microsoft Lumia 1020 | 768 | 1280 | 320 | 480 | 2.4 | 332 | 220 |
| Microsoft Lumia 925 | 768 | 1280 | 320 | 480 | 2.4 | 332 | 220 |
| Microsoft Lumia 920 | 768 | 1280 | 320 | 480 | 2.4 | 332 | 220 |
| Microsoft Lumia 900 | 480 | 800 | 320 | 480 | 1.5 | 217 | 144 |
| Microsoft Lumia 830 | 720 | 1280 | 320 | 480 | 2 | 294 | 192 |
| Microsoft Lumia 620 | 480 | 800 | 320 | 480 | 1.5 | 252 | 144 |
| Motorola Nexus 6 | 1440 | 2560 | 412 | 690 | 3.5 | 493 | 336 |
| HTC One | 1080 | 1920 | 360 | 640 | 3 | 468 | 288 |
| HTC 8X | 720 | 1280 | 320 | 480 | 3 | 341 | 288 |
| HTC Evo 3D | 540 | 960 | 360 | 640 | 1.5 | 256 | 144 |
| Sony Xperia Z3 | 1080 | 1920 | 360 | 598 | 3 | 424 | 288 |
| Sony Xperia Z | 1080 | 1920 | 360 | 640 | 3 | 443 | 288 |
| Sony Xperia S | 720 | 1280 | 360 | 640 | 2 | 342 | 192 |
| Sony Xperia P | 540 | 960 | 360 | 640 | 1.5 | 275 | 144 |
| Xiaomi Redmi Note 8T | 1080 | 2340 | 393 | 775 | 2.75 | 409 | 264 |
| Xiaomi Redmi Note 5, 6 | 1080 | 2160 | 393 | 739 | 2.75 | 403 | 264 |
| Xiaomi Mi 4 | 1080 | 1920 | 360 | 640 | 3 | 441 | 288 |
| Xiaomi Mi 3 | 1080 | 1920 | 360 | 640 | 3 | 441 | 288 |
| Lenovo K900 | 1080 | 1920 | 360 | 640 | 3 | 401 | 288 |
| Pantech Vega n°6 | 1080 | 1920 | 360 | 640 | 3 | 373 | 288 |
| Blackberry Leap | 720 | 1280 | 390 | 695 | 2 | 294 | 177 |
| Blackberry Passport | 1440 | 1440 | 504 | 504 | 3 | 453 | 274 |
| Blackberry Classic | 720 | 720 | 390 | 390 | 1.8 | 294 | 177 |
| Blackberry Q10 | 720 | 720 | 346 | 346 | 2 | 328 | 192 |
| Blackberry Z30 | 720 | 1280 | 360 | 640 | 2 | 295 | 192 |
| Blackberry Z10 | 768 | 1280 | 384 | 640 | 2 | 355 | 192 |
| Blackberry Torch 9800 | 360 | 480 | 360 | 480 | 1 | 187 | 96 |
| ZTE Grand S | 1080 | 1920 | 360 | 640 | 3 | 441 | 288 |
| ZTE Open (Firefox OS) | 480 | 720 | 320 | 480 | 1.5 | 165 | 144 |
參考資料
https://www.mydevice.io
https://material.io/resources/devices/