不同螢幕尺寸與比例的呈現
不只是「手機版」與「電腦版」
很多人以為網站只要準備兩種版面就夠了，但實際的螢幕尺寸是連續的光譜。
常見的範圍包含：小尺寸手機、大尺寸手機、摺疊裝置、直式與橫式平板、筆電、桌上型螢幕、超寬螢幕。
好的設計應該在任何寬度下都合理，而不只是在幾個特定尺寸下好看。
幾個容易被忽略的情境
一、小尺寸手機
市面上仍有螢幕較窄的機型。常見問題是表格撐破畫面、按鈕文字被擠壓換行、價格數字被切斷。
測試時建議把瀏覽器視窗縮到很窄，看版面是否仍然合理。
二、手機橫放
使用者可能把手機轉成橫向瀏覽，此時：
- 可見高度變得很矮
- 固定在畫面上下的元素可能佔掉大半空間
- 需要捲動的距離變長
如果網站有全螢幕的區塊設計，橫放時可能完全看不到內容。
三、平板的尷尬區間
平板的寬度介於手機與電腦之間，常常落在版面切換的邊界附近。
常見問題：套用了電腦版的版面但空間不足，或套用手機版而顯得過於空曠。
直式與橫式平板的差異也很大，建議兩種都測。
四、摺疊裝置
摺疊機在展開與收合時寬度差異很大，而且可能在使用中途改變。
設計上不需要特別針對，但版面應該能平順地適應寬度變化，而不是在某個寬度突然崩壞。
五、超寬螢幕
大尺寸或超寬螢幕上，如果內容沒有設定最大寬度：
- 文字會被拉得很長，一行超過舒適的閱讀長度
- 版面顯得空洞
- 圖片被過度放大而模糊
建議為內容設定合理的最大寬度，超過時置中留白，而不是無限延展。
閱讀長度的原則
一行文字太長時，眼睛回到下一行的起點會變困難，閱讀效率下降。
建議為文字內容設定最大寬度，這比讓它佔滿整個螢幕更好讀。
這也是為什麼許多網站在大螢幕上，內容區塊是置中而非滿版的。
測試的實務方法
方法一：緩慢拖曳視窗寬度
把瀏覽器視窗從最寬慢慢拖到最窄，觀察版面的變化過程。
要注意的是：
- 有沒有某個寬度突然破版
- 切換版面時是否平順
- 有沒有文字重疊或超出
- 圖片會不會變形
這是最快也最有效的檢查方式，比逐一測試特定尺寸更容易發現問題。
方法二：實機測試
用實際的手機與平板操作。模擬看不出觸控手感、鍵盤彈出的影響、實際的載入速度。
方法三：檢查邊界值
版面切換的臨界寬度附近最容易出問題。請廠商說明版面在哪些寬度切換，然後在那些寬度附近多測幾次。
斷點的說明見斷點與設計稿的檢視。
表格是最常出問題的元素
規格表、比較表、價目表在窄螢幕上特別容易出問題。
常見的處理方式
- 允許水平捲動——最簡單，但要有明顯的提示讓使用者知道可以滑
- 轉換為卡片式呈現——每一列變成一張卡片
- 隱藏次要欄位——只顯示關鍵資訊，可展開看完整內容
不建議的做法是讓表格直接撐破畫面——那會讓整個頁面都能左右滑動，體驗很差。
圖片在不同尺寸下的處理
- 不要用大圖直接縮小顯示——浪費頻寬，手機使用者尤其吃虧
- 重要內容不要放在圖片邊緣——不同比例下可能被裁切
- 文字不要做在圖片上——縮小後會看不清楚
見圖片尺寸與壓縮。
該測到什麼程度
務實的建議：
| 優先度 | 測試項目 |
|---|---|
| 必測 | 一般手機直式、電腦一般視窗 |
| 建議測 | 小尺寸手機、平板直式、大螢幕 |
| 視情況 | 手機橫放、平板橫式、超寬螢幕 |
| 通常不必 | 摺疊機、特殊比例裝置 |
依實際數據調整
分析工具可以看到訪客的螢幕尺寸分布。看自己網站的數據，比通用建議準確。
驗收時的檢查清單
- 從最寬拖到最窄，過程中沒有破版
- 小尺寸手機上，表格與價格不會被切斷
- 大螢幕上，文字不會被拉得過長
- 圖片在各尺寸下都不變形
- 手機橫放時仍能正常使用
- 平板上的版面合理，不會過於空曠或擁擠
第一項最有效率——一次拖曳就能發現大部分問題。
破版的排查見手機版破版與常見問題排查。
各瀏覽器與企業環境的設定差異很大，本文說明的是原則與判斷方向。實際的處理方式建議與對方的資訊人員或維護廠商確認。