手機版 網頁設計 Banner 文字被切掉，不是網站壞掉，
是圖片超出 網頁設計 安全顯示範圍。
本文從一段真實客戶對話出發，說明為什麼 網頁 素材要先符合規格，
而不是每次換圖都讓工程師重新調 網頁 版面，
這個順序搞反，維護成本只會越來越高。
是圖片超出 網頁設計 安全顯示範圍。
本文從一段真實客戶對話出發，說明為什麼 網頁 素材要先符合規格，
而不是每次換圖都讓工程師重新調 網頁 版面，
這個順序搞反，維護成本只會越來越高。
客戶傳訊息來：
「手機版 Banner 的文字被切掉了，是不是網站沒做好？」
客
手機版 Banner 的文字被切掉了，是不是網站沒做好？
我
不是壞掉，是手機版 Banner 有固定的顯示範圍。
客
那不能讓圖片完整顯示嗎？
我
可以調，但如果改版面設定，會影響其他 Banner 的比例和整體排版。
客
可是我這張圖想完整出現。
我
問題是圖片裡的文字已經超出安全範圍了，
手機版畫面就像一張固定大小的紙，內容超出邊界，本來就會被裁切。
手機版畫面就像一張固定大小的紙，內容超出邊界，本來就會被裁切。
客
那就每張圖都幫我調到剛好啊。
我
這樣就不是網站系統了，
每換一張圖，工程師就要重新調一次版面。
每換一張圖，工程師就要重新調一次版面。
Banner 安全範圍是什麼：
手機版 Banner 的顯示區域有固定的寬高比，
但每支手機的螢幕寬度不一樣，
系統會自動裁切圖片的上下或左右，
讓它填滿版面。
這表示圖片四周的邊緣區域，不一定每台裝置都看得到，
所謂安全範圍，就是「不管在哪台裝置上都保證顯示」的中間區域，
主要文字和 CTA 按鈕如果放在這個範圍裡，就不會因為裝置不同而被裁切掉，
超出安全範圍的內容，視螢幕寬度而定，
有可能完整顯示，也有可能直接消失，
實際製作時，通常會在設計稿上標出一條參考線，
告訴設計師「文字只能放這個框框裡」。
這條線就是安全範圍的邊界。
就像 A4 紙列印，內容超出邊界， 就會印不完整。
所以在製作網站圖片時， 不只是圖片解析度要夠，
文字位置、邊距、 安全範圍也都要一起考慮。
這種對話其實很常見，不只是 Banner。
問題不在於能不能做，技術上幾乎什麼都能改，
問題是，為了每一次素材不符合規格，要不要去破壞原本的版面規則。
圖片尺寸、文字安全範圍、手機版顯示比例，這些不是多餘的限制，
是讓網站後續好維護的基本規則，
先有規格，再依照規格製作素材，這個順序一旦搞反，後面就會一直在補洞。
沒有規格的狀況
圖片改一次，版面調一次，
再換一張圖，又重來一次，
這是人工拼貼。
有規格的狀況
素材按規格製作，換圖就是換圖，
網站不用動，
維護成本不會隨著換圖次數累積。
服務可以有彈性，但專案不能沒有界線。
