處理 RWD 網站時遇過許許多多案例，對 RWD 圖片或版面效果覺得跟心目中的 RWD 定義(或是想像)不太一樣。其實以 Blogger 一頁式範本來看，我還沒看過不是 RWD 的版型，那麼一頁式也可以當作 RWD 網站來看待。會產生落差的原因，有可能是這個版型設計上的問題，也可能對 RWD 的認知有誤，或者其實是瀏覽器的效果。本篇會整理一些常發生的案例，說明如何處理各種狀況。
(圖片出處: pexels.com)
Q1. 網頁寬度能否調寬？
有些案主會覺得奇怪：「我架設了 RWD 網站，怎麼網頁寬度還是很小，能否再調寬一點？」
這樣的案例很常遇到，例如上圖的範例，案主會覺得別人的網站打開後類似左圖，而自己的網站打開後類似右圖，網頁寬度不夠、效果不佳，所以才會希望網頁寬度要調寬。
1. 瀏覽器可放大縮小比例
這個案情不太單純，其實左、右兩圖都是使用同一個 Blogger 範本製作的網站，為何會發生寬度不一致的效果？
經過調查，請案主對著瀏覽器按
另一個確認網頁大小比例的方法，以 Chrome 為例，按右上角「選單」圖示後，就能看到縮放比例(上圖為 90%)。
所以這個狀況其實可以算是烏龍案件：
- 由於現在的螢幕尺寸主流為 1920 x 1080 (寬螢幕)，如果每個網頁第一次打開時都是預設顯示 100%，那麼寬度一定無法達到 1920px 這麼寬
- 使用者必須手動按
Ctrl + 放大寬度直到滿意的效果為止 - 之後每次打開同一個網頁時，Chrome 會記憶上次的百分比，顯示同樣的寬度。
- 那麼案主覺得網頁寬度不夠，其實只是因為第一次打開網頁，尚未調整寬度比例，所產生的錯覺而已
2. RWD 網頁不需要調整寬度
正常的 RWD 網頁其實不需要再另外調整寬度，因為 CSS 已經設定了各種螢幕寬度、行動裝置之下，每個區塊需要顯示的尺寸、比例等等。
如果堅決想要調整 RWD 網頁的寬度，弄不好反而把各種螢幕寬度、行動裝置的 CSS 設定打亂了，造成更大的災難。
那麼我的建議會是，架站選擇範本時，直接選一個符合心目中寬度、滿意的 RWD 範本來架設，會比較省事，而不要選了某範本後再來改寬度，免得得花更多時間與費用。
Q2. 網頁怎麼沒有 100% 螢幕寬？
案主另一種想法是，RWD 網頁寬度不是應該要自動放大為螢幕寬嗎？這是很常遇到的疑問，而背後也隱藏相當大的問題，因此必須詳細說明。
1. 網頁不是每個區塊都適合全螢幕寬
通常 RWD 版型，適合全螢幕寬度的區塊是這些：
- 網頁開頭的形象圖
- 輪播區塊
也就是說圖片才適合放在 100% 螢幕寬的區域，因為在各種不同寬度的裝置，圖片都能等比例進行縮放。
2. 全螢幕網頁會造成的問題
如果網頁區塊主要構成為文字，那麼該區塊自動成為 100% 螢幕寬時，問題就來了：
- 一般網頁常使用的寬度大概落在 1000 ~ 1280 px
- 目前主流螢幕的寬度為 1920px，將來可能是 4k 螢幕
- 一般文章區塊字體大小可能設定為 16px，不管在多寬的螢幕就是顯示 16px
- 如果網頁一打開，區塊就自動變成 100% 螢幕寬，那麼越大的螢幕，文字看起來就非常小，使用者會誤以為網頁設計不佳。
- 所以 RWD 網頁比較好的作法，是文字區塊不要使用 100% 螢幕寬。參考前面「Q1. 網頁寬度能否調寬？」的原理，讓使用者打開網頁後，自主按
Ctrl + 放大寬度，這樣文字就會自動等比例放大
以「Livia's Wonderland 薇笑樂園」首頁作為舉例，輪播圖片區塊適合放大為螢幕寬，而上方導覽列的文字範圍、下方文章區塊則維持網頁原本的寬度。
3. 結論
對 Q2 做個總結：
- RWD 網頁寬度沒有自動 100% 螢幕寬才是正確的設計
- RWD 主要是對螢幕寬度較小的行動裝置，向下調整版面內容
- 而不是向上對寬度較大螢幕進行調整
- 一定要對有文字的區塊使用 100% 螢幕寬時，請參考這篇「讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin」，另外用 CSS 技巧處理
Q3. 為何一頁式網頁背景圖片無法 RWD？
以「領航地政士事務所」首頁作為舉例：
這是在 4:3 螢幕看到的效果，背景圖片看起來很正常。
這是在 1920px 寬螢幕看到的效果，摩天大樓上方被截掉了。不過這個圖在手機上還是 ok 的，因為直立效果裁切中間區塊時，摩天大樓是完整的。
這個現象的回覆如下：
- 一頁式版型由於設計成一頁一頁切換，通常會顯示符合螢幕高度的背景圖
- 然而使用者螢幕寬度都不同，在 "圖片高度固定只能顯示螢幕高度" 的情況下，圖片只好被裁切了
- 但無論是左右、或上下，多半 CSS 會設定為置中裁切
- 建議的處理方式有三種：
- 把主要圖案放在靠近正中央的位置，那麼無論上下或左右進行裁切時，效果不至於太差
- 為不同螢幕比例準備不同的背景圖，使用 CSS 設定
- 或是使用 "紋理" 當作背景圖，那麼無論如何裁切都不影響效果，可參考「照護線上」
Q4. 輪播圖片能否不要被裁切？
就我經手的範本，輪播區塊幾乎都有設固定高度，例如 400px。這樣的做法幾乎都會導致圖片被裁切，因為輪播區塊的比例一定會跟圖片的比例不同。
這麼做其實有其道理，如果輪播區塊高度不固定的話，很多版型看起來會比較突兀，這麼做可以算是設計師打安全牌，減少客訴的機會。
想要輪播圖片不被裁切的話，需要這麼做：
- 重新調整範本預設的程式碼，不固定輪播區塊的高度
- 所有使用於輪播的圖片，請使用固定的比例、尺寸
- 這麼做的話，輪播區塊的高度就能保持一致，不破壞版面協調，圖片又不會被裁切
Q5. 為何輪播圖片無法 RWD？
這個案例比較特殊，案主希望輪播區塊在各種螢幕寬度下，比例都一樣，也就是在手機上的時候，也要保持跟網頁版一樣的長寬比例。
一般來說，手機上的輪播，圖片比例跟網頁會不一樣，圖片看起來才會大一點、比較明顯。
上圖是網頁版輪播比例，在 1920px 寬的螢幕上看起來版面是協調的。
但如果手機上維持圖片比例的話，輪播區塊相對較小，圖片看起來吸引訪客的效果會降低。
因此除非客戶要求，我並沒有建議這麼做，手機版的輪播圖片還是使用另一種比例為佳。
Q6. 為何有些時候圖片看起來比較模糊？
其實這種情況發生的機率不高，不過還是紀錄一下。
再拿開頭第一張圖舉例，左圖是部落格首頁的常見配置，文章區塊左側為縮圖、右側為文章摘要。
若這張縮圖為正方形，也就是比上圖的長方形縮圖的寬度還窄，那麼在切換到比較小的螢幕時，有可能 RWD 網頁自動把文章區塊調整為 100% 螢幕寬度，而且圖片也自動成為 100% 寬度的縮圖。
這會造成一個現象，就是 "螢幕比較小的時候，圖片反而比較大"，再不巧這張圖的尺寸原本就不大，導致在螢幕比較小，圖片需要放大顯示，結果看起來就變得模糊了。
要解決 RWD 網頁的圖片顯示問題，如果是 Blogger 平台，我之前已經寫了一個工具「RWD 圖片語法產生器」，只要是 Blogger 上傳的圖片，都能利用這個工具自動產生 RWD 圖片語法，可在各種不同螢幕尺寸，自動載入對應的圖片尺寸，能完美解決 RWD 網站的圖片問題。
更多 RWD 相關文章：
感謝作者用心的解說
回覆刪除讀完文章後對於一些之前發現的疑惑終於有了解答
：)