12/03/2018

一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

A+
one-page-rwd-image-width-problem.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理處理 RWD 網站時遇過許許多多案例,對 RWD 圖片或版面效果覺得跟心目中的 RWD 定義(或是想像)不太一樣。其實以 Blogger 一頁式範本來看,我還沒看過不是 RWD 的版型,那麼一頁式也可以當作 RWD 網站來看待。

會產生落差的原因,有可能是這個版型設計上的問題,也可能對 RWD 的認知有誤,或者其實是瀏覽器的效果。本篇會整理一些常發生的案例,說明如何處理各種狀況。

(圖片出處: pexels.com)


Q1. 網頁寬度能否調寬?


有些案主會覺得奇怪:「我架設了 RWD 網站,怎麼網頁寬度還是很小,能否再調寬一點?」

one-page-rwd-image-width-problem-1.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

這樣的案例很常遇到,例如上圖的範例,案主會覺得別人的網站打開後類似左圖,而自己的網站打開後類似右圖,網頁寬度不夠、效果不佳,所以才會希望網頁寬度要調寬。

1. 瀏覽器可放大縮小比例

這個案情不太單純,其實左、右兩圖都是使用同一個 Blogger 範本製作的網站,為何會發生寬度不一致的效果?

經過調查,請案主對著瀏覽器按 Ctrl +Ctrl - 調整網頁大小,兩個網站都調整成相同比例時,例如同為 100% 大小,結果兩個網站的寬度就一致了。


one-page-rwd-image-width-problem-2.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

另一個確認網頁大小比例的方法,以 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 + 放大寬度,這樣文字就會自動等比例放大


one-page-rwd-image-width-problem-3.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

以「Livia's Wonderland 薇笑樂園」首頁作為舉例,輪播圖片區塊適合放大為螢幕寬,而上方導覽列的文字範圍、下方文章區塊則維持網頁原本的寬度。


3. 結論

對 Q2 做個總結:




Q3. 為何一頁式網頁背景圖片無法 RWD?


以「領航地政士事務所」首頁作為舉例:

one-page-rwd-image-width-problem-4.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

這是在 4:3 螢幕看到的效果,背景圖片看起來很正常。


one-page-rwd-image-width-problem-5.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

這是在 1920px 寬螢幕看到的效果,摩天大樓上方被截掉了。不過這個圖在手機上還是 ok 的,因為直立效果裁切中間區塊時,摩天大樓是完整的。

這個現象的回覆如下:

  • 一頁式版型由於設計成一頁一頁切換,通常會顯示符合螢幕高度的背景圖
  • 然而使用者螢幕寬度都不同,在 "圖片高度固定只能顯示螢幕高度" 的情況下,圖片只好被裁切了
  • 但無論是左右、或上下,多半 CSS 會設定為置中裁切
  • 建議的處理方式有三種:
    • 把主要圖案放在靠近正中央的位置,那麼無論上下或左右進行裁切時,效果不至於太差
    • 為不同螢幕比例準備不同的背景圖,使用 CSS 設定
    • 或是使用 "紋理" 當作背景圖,那麼無論如何裁切都不影響效果,可參考「照護線上



Q4. 輪播圖片能否不要被裁切?


就我經手的範本,輪播區塊幾乎都有設固定高度,例如 400px。這樣的做法幾乎都會導致圖片被裁切,因為輪播區塊的比例一定會跟圖片的比例不同。

這麼做其實有其道理,如果輪播區塊高度不固定的話,很多版型看起來會比較突兀,這麼做可以算是設計師打安全牌,減少客訴的機會。

想要輪播圖片不被裁切的話,需要這麼做:

  • 重新調整範本預設的程式碼,不固定輪播區塊的高度
  • 所有使用於輪播的圖片,請使用固定的比例、尺寸
  • 這麼做的話,輪播區塊的高度就能保持一致,不破壞版面協調,圖片又不會被裁切



Q5. 為何輪播圖片無法 RWD?


這個案例比較特殊,案主希望輪播區塊在各種螢幕寬度下,比例都一樣,也就是在手機上的時候,也要保持跟網頁版一樣的長寬比例。

一般來說,手機上的輪播,圖片比例跟網頁會不一樣,圖片看起來才會大一點、比較明顯。

one-page-rwd-image-width-problem-6.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

上圖是網頁版輪播比例,在 1920px 寬的螢幕上看起來版面是協調的。


one-page-rwd-image-width-problem-7.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

但如果手機上維持圖片比例的話,輪播區塊相對較小,圖片看起來吸引訪客的效果會降低。

因此除非客戶要求,我並沒有建議這麼做,手機版的輪播圖片還是使用另一種比例為佳。



Q6. 為何有些時候圖片看起來比較模糊?


其實這種情況發生的機率不高,不過還是紀錄一下。

one-page-rwd-image-width-problem-1.jpg-一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理

再拿開頭第一張圖舉例,左圖是部落格首頁的常見配置,文章區塊左側為縮圖、右側為文章摘要。

若這張縮圖為正方形,也就是比上圖的長方形縮圖的寬度還窄,那麼在切換到比較小的螢幕時,有可能 RWD 網頁自動把文章區塊調整為 100% 螢幕寬度,而且圖片也自動成為 100% 寬度的縮圖。

這會造成一個現象,就是 "螢幕比較小的時候,圖片反而比較大",再不巧這張圖的尺寸原本就不大,導致在螢幕比較小,圖片需要放大顯示,結果看起來就變得模糊了。

要解決 RWD 網頁的圖片顯示問題,如果是 Blogger 平台,我之前已經寫了一個工具「RWD 圖片語法產生器」,只要是 Blogger 上傳的圖片,都能利用這個工具自動產生 RWD 圖片語法,可在各種不同螢幕尺寸,自動載入對應的圖片尺寸,能完美解決 RWD 網站的圖片問題。


更多 RWD 相關文章:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP