This content is over 16 years old. It may be obsolete and may not reflect the current opinion of the author.

我對 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 的大神們開釋。

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