Fluid Layout

我對 fluid layout 還滿堅持的,只要有辦法,我都會把自己做的 Web app/page 調成比例寬度(甚至高度!例如演示實驗網站的首頁)。但我現在發現並不只是把兩攔的寬度改成比例一切就完成了,要把 Fluid Layout 做好還有很多需要處理的地方。最近尤其關注在手機瀏覽器上 Fluid Layout 的解法,總之把一些知道的事情新的舊的統統寫出來:

Design:

  • 充分利用空間:人們(我?)常說固定寬度最大的缺點是無論別人螢幕多大,兩側總會有 padding 完全浪費掉。但Fluid Layout 不一定比較來的容易充分利用空間,尤其是內容牽涉到圖片的時候。如果沒有仔細處理內容,讓寬度隨之縮放的話,那只是把固定寬度浪費的空間分散到內容各自的 padding 而已。而且版面反而更散亂。這實在沒有什麼解法,只能把一個一個元素慢慢刻。處理不好這個的話,那不如做個固定 1004px 寬度的版面,然後期待買寬螢幕/大螢幕的人都會用 Firefox 3 的 Full page zoom 功能算了…
  • 文字攔寬:文字似乎不會有上述的問題,同段落的文字會全部排上來,頂多就是網頁變短而已。但是若設計者做了一個在 1280px 的瀏覽器底下文字攔寬長達 1024px 的網頁,那讀起來其實也很辛苦。我自己對付這個問題的解法是盡量不要讓某攔的寬度超過 55% ,如果只有兩攔的話,那就放棄掉一些左右的空間吧 (囧)。Stellarium 中文包的網頁是個範例。這就是個 design 的兩難了:55% 的感覺是基於寬度 1280px 的螢幕與我習慣的字級、行距,寬度更大的螢幕還是可能產生閱讀問題;另外的兩難是,在利用空間這件事情上,寫一個 design principle 跟前面那項牴觸實在是很心虛呀…

Implantation:

  • Mac OS X 上的 Safari 在遇到 fluid layout 的網頁時,按視窗的「+」按鈕無法把自己放大到「適合」的寬度/高度。我很喜歡 OS X 的 UI 在「+」按鈕的行為(澄清:我沒有 Mac ,也沒有收蘋果的錢XD),但是 fluid layout 這種內容寬度 = 任意寬度的網頁,「+」按鈕無從處理(不信的話,拿一台 Mac 去演示實驗網站試試看)。結果不會變得無法閱讀啦,只是版面會看起來窄窄的(這可能要拿多一點網頁測試確定一下)。
    倒是 Mac OS X 上的 Firefox 沒有這個問題。牠(狐狸XD)的問題反而是「+」按鈕的行為和作業系統不同,變成跟 Windows 一樣,視窗佔滿螢幕放到最大。
  • Mobile Safari (iPhone & iPod Touch 上的那個)會無法偵測適合的寬度(再次澄清:我沒有這兩台機器,誰要捐給我)。幸好,根據 ADC 上的文件,Mobile Safari 這時似乎把自己當成一個寬度 980px 的瀏覽器;這個寬度各種 fluid layout 應該都活的不錯。如果不希望它自作聰明調整寬度的話,ADC Web Apps Dev Center 上面也有關於 viewpoint meta tag 的文件可以 follow (Guideline 那篇文章,要先登入會員才能點)。
    一言以蔽之,如果你的網頁在 980px 下活的不錯,直接加上這行就對了:
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

    最好還是找台機器測試比較保險。
  • Opera Mini 不用 Apple 那套自訂的 meta tag,它用既存的 CSS Media queries 標準。乍看之下比較麻煩,但這樣做才能真的滿足在不同手機上不同寬度的 Opera Mini ,且讓設計者完全掌握網頁在手機上應有的樣子。不要看到 @media 就暈了(準備 screen Stylesheet 又準備 print Stylesheet 還要準備另一份?),比較輕鬆的作法(其實 print stylesheet 也應該要這樣做才對) 不是為不同的 device 準備不同的 CSS 檔再用 <link media=”” /> 去指,而是準備一個大的 CSS 檔案,把所有 screen 用的 Style 放在 @media 外面,再用 @media print { … } 和 @media handheld { … } 去包其他裝置需要的 CSS 修改。
    一言以蔽之(again),如果你的 blog 等地方的 CSS 和「普通人」一樣沒有 @media 段落,Opera Mini 4 的 Desktop rendering mode 又會寬度偵測失敗的話,那只需要在 CSS 的最後面加上這段:
    @media screen and (max-device-width: 640px) {
    html { min-width: 640px }
    }

    如果要控制 small screen rendering 的 style (SSR 會忽略某些 style,像是 float,就算在這裡指定也沒用),它的 media query 則是:
    @media handheld and (max-device-width: 980px) { ... }
    相關資料可以看 Dev.opera 上的這篇文章。要測試的話有 Live Demo 可以用(需要 Java),不要傻傻的在手機上點點點捐錢給電信公司呀 … Desktop Opera 似乎也可以跑 SSR 模式,還請常用 Opera 的大神們開釋。

就這樣啦,以上是我的小心得,如果有任何疏漏請留言多多指教,感謝。

One thought on “Fluid Layout

  1. Pingback: Blog: timdream » Mozilla 的手機瀏覽器 Fennec

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.