遊戲方式：
- 準時收看11月7日馬總統和陳會長的會面，收聽會後記者會(會有嗎?)或是看聯合公報全文。
- 出現賓果上的文字就劃掉；一格有兩行字的，出現其中一行就算。
- 收集連線，五條就賓果！
Inspired by Palin Bingo.
文字來源：馬總統就職演說、國慶致詞、連胡會公報，人工篩選關鍵字。是的，「中華民族」這個詞每篇文章都有。
Author Archives: Timothy Chien (blog)
Mozilla 的手機瀏覽器 Fennec
Fennec 計畫，你大概已經聽過了，是 Mozilla 試著將 Mozilla application framework 放到手機上，順便做個新 UI 給手機版 Firefox 的計畫（還是反過來？笑）。
Alpha 1 最近出了，Mozilla Links 有做介紹。Fennec Alpha 1 提供了三大桌面作業系統的版本供沒有智慧手機的使用者下載嚐鮮。初步嚐試，覺得 UI 設計的不錯；若有觸控螢幕的話，這種瀏覽器可以當作簡潔、方便，連阿嬤也會用的 kiosk 瀏覽器。
很剛好，前天才寫了手機瀏覽器對網頁寬度的處理。這裡順便補完 Fennec ：
- Fennec 似乎認為自己是寬度為 800px 的桌面瀏覽器。800px 可能只是桌面測試版的預設值而已，因為在 Windows 上它的視窗可以縮放，然後重新載入網頁之後就會用不同的寬度處理網頁。怪。倒是 Nokia N810 的螢幕還真的是 800 x 480；這代表 Fennec 的寬度是 device-dependent ？
- Fennec 會將超過寬度的網頁 full page zoom 縮小到不出現橫向捲軸的程度。在 800px 的畫面下，1024px 的 Yahoo! 奇摩首頁看起來文字大小還可以。好功能，希望這個模式可以反過來出現在 Firefox 上面（好啦，我知道 Desktop Opera 早就有了，請愛用者不要特別寫回應來科科）。
- 和其他手機瀏覽器一樣，使用者可以放大縮小某個範圍的畫面（桌面測試版上此功能指定在捲動滑鼠滾輪）。
- Fennec 不像 Opera Mini 一樣，會處理 handheld stylesheet 或是 media query 過的 screen stylesheet，也不處理 Apple 為 Mobile Safari 定義的 viewpoint meta tag （前天的文章我有詳述）。加上前面寬度的怪事，我想 Fluid Layout 在真正手機上的 Fennec 排版會被擠的很慘。對於努力擁抱標準的 Mozilla 來說，沒有處理這個實在很糟。或是說，Fennec 打算它支援的手機螢幕寬度都從 800px 起跳？
這是 alpha，代表開發團隊還沒把所有大功能全部寫完，所以一切還有待觀察囉。至於文章開頭說的反過來，我是認真的：我認為 MAF 能活在 x86 以外的機器，比起做出另一個手機瀏覽器來的重要的多。除了 Alpha 1 已經有的 Maemo 平台（Nokia N810 的作業系統，Linux 系）版本，正式版據說還會 Windows Mobile。Android 和 iPhone 版本會因為一些八卦不會由 Mozilla 正式推出，但我猜 commiunty port 應該很快就會出現。
網路越來越熱鬧了呢。
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 的大神們開釋。
就這樣啦，以上是我的小心得，如果有任何疏漏請留言多多指教，感謝。