文／Jollen Chen（原文刊載於 CTimes 雜誌 2013 年 2 月份）

八屏一雲是鴻海科技集團擎畫的技術藍圖。鴻海科技集團協助 Moko365 舉辦 HTML5 相關課程，筆者有幸擔任系列課程的主要講師，在整理相關技術的過程中，得到了一些心得。使用 HTML5 做為八屏裝置的核心技術時，有什麼關鍵的地方要特別注意？筆者整理了幾個議題，在此與大家分享。

第一、跨裝置。這是第一個「八屏一雲」的重要技術工作。從技術的角度來說，「八屏一雲」，要能跨裝置（cross-device），而好的技術莫過於 HTML5。HTML5 是一個標準，透過此標準來開發 Web App；Web App 必須透過瀏覽器來執行。我們說，Web App 的執行環境（runtime）是瀏覽器。

第二、跨瀏覽器。 第二次瀏覽器大戰開始於2010年左右，大概是 HTML5 標準即將發佈，以及智慧型手機發展進入最高峰，二個時間的交匯點。現今，在 HTML5 世界裡，較具代表性的瀏覽器是 Firefox、Safari 以及 Chrome。

由於每一個瀏覽器實作 HTML5 標準的程度不一，並且實作上還會有一些小差異，因此，讓 Web App 能做到跨瀏覽器（cross-browser）成為另一個重要任務。還好，這個工作是階段性的，不過倒是能讓開發者忙碌很長一段時間。

第三、善用 Media Query。這是 CSS3 裡的標準，簡單說，它可以幫助開發者自動偵測目前的裝置屬性，並且依不同的屬性來套用不同的 CSS 設計。為不同裝置撰寫不同的 CSS 樣式，並依裝置的不同來選取套用，這就是 Media Query 的功能。

很麻煩的是，現今的瀏覽器仍有 Media Query 支援不足的問題。例如：rem 單位在 Media Query 的區域裡可能失效。這是瀏覽器的不足，理論上未來的實作將會解決這些問題。目前，可以使用 JavaScript media query 的暫時替代方案。

第四、用對 UI Framework。在「八屏一雲時代來臨 教你HTML5六小時打通」課程裡，筆者整理了不只 20 種 UI Framework。以「cross device」做為題目，較廣為流行的是 Less Framework 4，它極為簡單易用。Less Framework 4 能幫助開發者生成支援不同裝置的 CSS Media Query。

但這些 UI Framework 在支援跨裝置方面仍有不足之處。以鴻海的八屏一雲理念來說，仍沒有一個 UI Framework 真正具備「跨八屏」的能力。這裡仍有許多技術工作，若鴻海能在這個部份投入資源，補足這個基礎建設，將會是很有價值的事情。

第五、瀏覽器作業系統化。從 Chrome 到 Firefox OS（前身為 Boot to Gecko），瀏覽器作業系統的發展，從沒有停滯過。Gecko 是 Firefox 的 HTML5/CSS 引擎，因此「Boot to Gecko」就是「一開始就是瀏覽器環境」的概念。

從工程的角度來看，Webkit 是一個很值得投資的瀏覽器引擎，它的發展始於 KDE 計畫，並吸引像是 Apple 這類型的知名企業加入。現在，Webkit 是一個很活躍的 Open source 計畫。許多知名的瀏覽器，例如：Safari，都採用 Webkit 做為其核心。

或許「Boot to Webkit」會是一個很好的創新研發題目，不管如何，具備維護 Webkit 引擎的能力，將可能是八屏一雲計畫的技術核心。

Moko365 與鴻海科技集團，從贊助免費 HTML5 課程開始，希望能逐步推廣 HTML5 技術與八屏一雲觀念。最後，八屏指的是哪八種不同的屏？手機屏、平板電腦、NB、AIO、Portable TV、TV、電子白板、LED顯示屏。