打造 Windows 8 的 Modern IE 10 完美網頁


Windows 8 內建兩種 Internet Explorer 10 (以下簡稱 IE10),一個是在桌面環境下使用的 IE10:視窗操作、可以支援各種 Plugins (ActiveX);而另外一個則是在新的開始畫面中的 IE10 (稱作 Modern IE10):它無邊框、更適合觸控操作、以及整合 Windows 8 的各種新功能特色。這篇文章將為網頁開發人員介紹,如何為 Modern IE10 打造完美網頁。

Internet Explorer 技術展示網頁

目錄

使用 HTML5 相關技術

IE 自從 IE9 開始大量支援 HTML5 等相關新技術,到了 IE10 更加完整,原本必須要靠外掛 (plugins, ActiveX 等) 或是圖片技巧所做出來的效果,現在大部份都能以 HTML5 相關技術實作出來。比如說:

  • 影音檔案可以使用 <video><audio> 標籤來播放
  • 若要 2D/3D 繪圖,可以使用 <canvas> 標籤以及 SVG 來搭配使用
  • 檔案操作可以使用 File API
  • 進階的 AJAX 操作 (如:檔案上傳) 可以使用 XMLHttpRequest2
  • 拖拉操作 (drag-and-drop) 可以使用 Drag and Drop API
  • 資料庫可以使用 IndexedDB

想要瞭解 IE10 究竟支援多少 HTML5 相關技術,請參考 IE10 開發者指南 – HTML5 章節。

運用 CSS3 作樣式設計

IE10 也大量支援 CSS3 許多規格,像是:

  • 使用 CSS3 Animation 製作網頁動畫
  • 使用 CSS3 Transition 設定網頁元素過場特效
  • 使用 CSS3 Transformation 來改變網頁元素的縮放、位移或旋轉
  • 使用 CSS Grid Layout、CSS Multi-column layout 或 CSS Flexible Box 等來作排版
  • 使用 CSS3 Gradients 製作漸層色彩效果

想要瞭解 IE10 究竟支援多少 CSS3 規格,請參考 IE10 開發者指南 – CSS 章節。

關於 Flash 支援

在大部份的情況下,Modern IE 不支援任何 plugins/ActiveX ,如果你的網頁非得用 plugins/ActiveX,那可以使用一些方法要求使用者切換到桌面版的 IE 來開啟網頁,只要在網頁中加入:

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" >

或是由伺服器送出的回應標頭加入這一項:

X-UA-Compatible: requiresActiveX=true

Modern IE 就會出現一個提示訊息,告訴使用者可以切換至桌面版 IE 來開啟該網頁。


提示使用者使用桌面版的 IE 來開啟頁面

然而,微軟維護了一份 Flash 支援清單,若是 Modern IE 瀏覽在支援清單中的網站,就會開啟 Flash 的支援功能,若您要申請加入支援清單,可參考更詳細的說明: IE 開發指南 – Windows 8 中內容需使用 Adobe Flash Player 之網站的開發人員指導方針 一文。

適應瀏覽模式

Modern IE 使用的情境有下列幾種:

  • Landscape 或是 Portrait 瀏覽

    不論是 Windows 8 (Pro) 或 Windows RT,當使用者在平板上使用 Modern IE10 的時候,可能會以 Landscape 或是 Portrait 模式來瀏覽網頁:

    IE10 in Landscape
    Landscape 模式瀏覽網頁
    IE10 in Portrait Mode
    Portrait 模式瀏覽網頁

    因應這兩種瀏覽模式的改變,可以使用 CSS3 Media Query 語法來讓瀏覽器套用對應的樣式:

    如果要限定可視區域的大小,可以使用 CSS Device Adaption 語法: @-ms-viewport 語法 (規格中是 @viewport) 來指定,像是這樣:

    如果要瞭解更詳細的設定語法,可以參考IE10 開發人員指南 – 裝置適應一文。

  • 貼齊 (snapped) 及填滿 (fill) 顯示

    在 Windows 8 中,(當螢幕解析度高於 1366×768, 且為 landscape 模式) 使用者可以將 Windows 市集應用程式「貼齊」 (snap) 在畫面的左右兩側,而其餘的顯示區域則稱為「填滿」(fill)。Modern IE 當然也可以支援「貼齊」及「填滿」顯示,此時網頁也可以像前一個例子一樣,使用 CSS3 Media Query 語法來套用不同的樣式。

    IE10 in Snapped Layout
    將 Modern IE10 貼齊在畫面左側
    IE10 in Fill Layout
    Modern IE10 以填滿模式顯示

    像是這樣:

為觸控操作優化

在平板上使用 Modern IE,主要的輸入方式都是觸控操作,傳統的網頁多是以鍵盤滑鼠的操作來設計,在加入觸控操作的思維下,網頁設計人員開始注意連結、按鈕可能要更大一點適合手指點擊 (若是預設的元件,像 <button> Modern IE本來就會以適合手指操作的大小來呈現)。然而還有一些細節也值得注意:

  • 適應表單輸入

    在 HTML5 的規格中定義了一些新的表單輸入元件的類別,像是 email 或網址的輸入,除了可以搭配 JavaScript API 來做資料格式驗證之外,在 Modern IE 中還可以根據這樣的類別來改變虛擬鍵盤的佈局。像是使用 <input type="email" > 時,當使用者要輸入資料時,虛擬鍵盤就會加入 @ 字元還有 .com 方便輸入:


    適合 Email 輸入的鍵盤佈局

    以下分別是使用 <input type="tel" ><input type="url" > 的虛擬鍵盤佈局:


    適合電話號碼輸入的鍵盤佈局

    適合網址輸入的鍵盤佈局
  • 觸控及手勢操作

    要撰寫觸控操作的相關程式碼,第一步就是要先偵測使用者的裝置是否支援觸控、以及支援到幾點觸控,這部份只要透過檢查 navigator.msMaxTouchPoints > 1 就可以了 (而這個屬性的值便是支援幾點觸控)

    而另一個要注意的細節是,Windows 8 本身就有許多觸控手勢的操作,如果你的某些操作需要手勢或觸控,而又不希望它觸發系統的觸控操作 (比方說,你想要支援向下滑動的手勢,但又不希望觸發 Windows 市集應用程式關閉的動作),可以在需要偵測手勢的元件上使用 CSS 語法 -ms-touch-action 來設定是否要支援系統的觸控手勢,或是完全自訂。舉例來說,如果:

    #myarea { -ms-touch-action: double-tap-zoom; }

    則表示在 #myarea 的元素中,不使用其它預設的手勢操作,只接受點擊兩下放大的操作,若是要完全自訂所有的觸控操作,則可以使用:

    #myarea { -ms-touch-action: none; }

    剩下就可以純粹使用 mousedown 或是 MSPointerDown (統整 mouse/pen/touch) 等相關事件來設計。這部份可以參考 IE 官方部落格中的 Touch Input for IE10 一文。

    而若要支援 drag-and-drop 或是其它的手勢,也可以參考 IE 官方部落格中的 Go Beyond Pan, Zoom, and Gesture 一文來瞭解如何運用手勢操作的事件。

關於更多在 Modern IE 上觸控優化的介紹,可參考 IE 開發者指南 – 使你的網站支援觸控操作 一文。

融合於 Windows 8

如果你希望你的網站在 Modern IE 上能與 Windows 8 有更多的整合,其實只要注意幾個 Windows 8 的細節以及 IE 所提供的功能就可以了。

  • 分享網頁內容

    在 Windows 8 之中,使用者隨時可以使用從螢幕右側滑出的 Charms 上的分享功能,將他正在使用的 Windows 市集應用程式,透過某個支援分享功能的 Windows 市集應用程式將某個資訊分享出去 (若該應用程式有實作這部份的功能)。而在 Modern IE 也可以結合這個功能,像是這樣:

    Share the webpage
    在瀏覽網頁中,叫出右側的 Charms 然後選擇分享
    Share the webpage
    選擇使用郵件程式作分享,郵件程式會抓取網頁概要內容及 URL 分享

    而你若希望分享資訊的程式 (如: 郵件) 在抓取網頁內容時抓取合適的資料,那可以在網頁中遵照 Open Graph 的格式 (Facebook, Google+ 也是使用這個資訊) 加入適當的 meta 標籤,如此一來,像是標題、摘要或是縮圖就可以按照你設定的 open graph 資料來顯示。以「VS2012女孩」這個網頁為例,它的 Open Graph 資料為:

    關於更詳細的說明,可以參考 IE官方部落格中的 Sharing Links from IE10 on Windows 8 一文

  • 釘選網站到開始畫面

    自從 IE9 開始加入了釘選網站 (pinned sites) 的功能,使用者可以將網頁釘在桌面下方的工作列上,搭配對應的 meta 標籤,就可以自訂跳躍清單 (在釘選的 icon 上按右鍵的選單) 以及通知的功能,關於釘選網站的介紹,可以參考這一頁的說明。

    當然在桌面版的 IE10 仍舊支援了釘選網站的功能,而 Modern IE 也可以釘選到開始畫面,除了延用 IE9 的跳躍清單設定方式之外,還能夠自訂動態磚上的圖案及顏色、產生通知訊息。

    要設定動態磚上的圖示以及動態磚顏色,只要使用下面這樣的 meta 標籤便可以設定:

    而若要產生通知的訊息及數量,也可以設定一個 XML 檔案如:

    然後再到網頁中加入下列的 meta 標籤設定:

    <meta name="msapplication-badge" content="重讀間隔時間 (ms); polling-uri=XML檔案網址">

    關於更詳細的 Modern IE 釘選網站的介紹,可以參考 IE官方部落格中的 High Quality Visuals for Pinned Sites in Windows 8

  • 與 Windows 市集結合

    Windows 8 / Windows RT 開始有了 Windows 市集,使用者可以從市集中搜尋、下載安裝 apps,如果你的網頁本身有 apps 在市集中,或是互相關連,則可以在網頁中加入下列的 meta 標籤,讓 Modern IE 的選單增加了直接前往市集下載的選項:

    以一款知名的遊戲 Cut The Rope 為例,它在網站上做了一個 HTML5-based 的版本,使用者除了可以直接用 Modern IE 連到 http://cuttherope.ie/ 來玩遊戲,也可以從選單中找到 Windows 市集 Cut The Rope 的 app 選項,查看網站上的程式碼,就可以發現它設定為:

    這樣便會在選單中出現到 Windows 市集下載的選項或是直接開啟已安裝的應用程式。


    選單中加入了移至 Cut the Rope 應用程式的選項

結論

Windows 8 上的 IE10 (或 Modern IE) 隨著 Windows 8 的 reimagine 後也加入了很多新的特色,如果在網頁設計上多將這些因素考慮進去,想必您的網頁會在 Windows 8 的使用者中更受歡迎!

Comments (0)

Skip to main content