目錄html
1.使用 HTML5 相關技術css3
2.運用 CSS3 做樣式設計git
3.關於 Flash 支持github
4.適應瀏覽模式Landscape 或 Portrait 模式canvas
snapped 模式或 fill 模式顯示windows
爲觸控操做優化友善表單輸入瀏覽器
5.觸控及手勢操做服務器
6.融合於 Windows 8app
分享網頁內容
固定網站及跳躍清單
與 Windows 應用市場結合
使用 HTML5 相關技術
IE 自從 IE9 開始大量支持 HTML5 等相關新技術，到了 IE10 更加完整，本來必需要靠插件 (plugins, ActiveX 等) 或是圖片技巧所作出來的效果，如今大部份都能以 HTML5 相關技術實做出來。好比說：
1.影音文件可使用 <video> 及 <audio> 標籤來播放
2.若要 2D/3D 繪圖，可使用 <canvas> 標籤以及 SVG 來搭配使用
3.文件操做可使用 File API
4.進階的 AJAX 操做 (如:文件上傳) 可使用 XMLHttpRequest2
5.拖拉操做 (drag-and-drop) 可使用 Drag and Drop API
6.資料庫可使用 IndexedDB
...
想要了解 IE10 究竟支持多少 HTML5 相關技術，請參考 IE10 開發者指南 - HTML5 章節。
運用 CSS3 做樣式設計
IE10 也大量支持 CSS3 許多規格，像是：
1.使用 CSS3 Animation 製做網頁動畫
2.使用 CSS3 Transition 設定網頁元素過場特效
3.使用 CSS3 Transformation 來改變網頁元素的縮放、位移或旋轉
4.使用 CSS Grid Layout、CSS Multi-column layout 或 CSS Flexible Box 等來做排版
5.使用 CSS3 Gradients 製做漸層色彩效果
...
想要了解 IE10 究竟支持多少 CSS3 規格，請參考 IE10 開發者指南 - CSS 章節。
關於 Flash 支持
在大部份的狀況下，Modern IE 不支持任何 plugins/ActiveX ，若是你的網頁非得用 plugins/ActiveX，那可使用一些方法要求使用者切換到桌面版的 IE 來開啓網頁，只要在網頁中加入:
或是由服務器送出的迴應標頭加入這一項：
X-UA-Compatible: requiresActiveX=true
Modern IE 就會出現一個提示訊息，告訴使用者能夠切換至桌面版 IE 來開啓該網頁。
提示使用者使用桌面版的 IE 來開啓頁面
然而，微軟維護了一份 Flash 支持清單，如果 Modern IE 瀏覽在支持清單中的網站，就會開啓 Flash 的支持功能，若您要申請加入支持清單，可參考更詳細的說明： IE 開發指南 - Windows 8 中內容需使用 Adobe Flash Player 之網站的開發人員指導方針 一文。
適應瀏覽模式
Modern IE 使用的情境有下列幾種：
1.Landscape 或是 Portrait 瀏覽
不管是 Windows 8 (Pro) 或 Windows RT，當使用者在平板上使用 Modern IE10 的時候，可能會以 Landscape 或是 Portrait 模式來瀏覽網頁：
Landscape 模式瀏覽網頁
Portrait 模式瀏覽網頁
因應這兩種瀏覽模式的改變，可使用 CSS3 Media Query 語法來讓瀏覽器套用對應的樣式：
@media screen and (orientation: landscape) {
/* 這裡填入在 landscape 模式瀏覽時使用的樣式 */
@media screen and (orientation: portrait) {
/* 這裡填入在 portrait 模式瀏覽時使用的樣式 */
view raw gistfile1.css This Gist brought to you by GitHub.
若是要限定可視區域的大小，可使用 CSS Device Adaption 語法: @-ms-viewport 語法 (規格中是 @viewport) 來指定，像是這樣：
view raw gistfile1.css This Gist brought to you by GitHub.
若是要了解更詳細的設定語法，能夠參考IE10 開發人員指南 - 裝置適應一文。
snapped 模式或 fill 模式顯示
在 Windows 8 中，(當屏幕解析度高於 1366x768, 且爲 landscape 模式) 使用者能夠將 Windows 應用市場應用程序 snapped 在畫面的左右兩側，而其餘的顯示區域則稱爲 fill。Modern IE 固然也能夠支持snapped 及 fill 顯示，此時網頁也能夠像前一個例子同樣，使用 CSS3 Media Query 語法來套用不一樣的樣式。
Modern IE10 以填滿模式顯示
像是這樣：
@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
/* 當 Modern IE10 在貼齊模式時的樣式設定，而且將可視區域設爲 320px */
}
view raw gistfile1.css This Gist brought to you by GitHub.
爲觸控操做優化
在平板上使用 Modern IE，主要的輸入方式都是觸控操做，傳統的網頁可能是以鍵盤鼠標的操做來設計，在加入觸控操做的思惟下，網頁設計人員開始注意連接、按鈕可能要更大一點適合手指點擊 (如果預設的元件，像 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 也能夠結合這個功能，像是這樣：
選擇使用郵件程序做分享，郵件程序會抓取網頁概要內容及 URL 分享
而你若但願分享資訊的程序 (如: 郵件) 在抓取網頁內容時抓取合適的資料，那能夠在網頁中遵守 Open Graph 的格式 (Facebook, Google+ 也是使用這個資訊) 加入適當的 meta 標籤，如此一來，像是標題、摘要或是縮圖就能夠按照你設定的 open graph 資料來顯示。以「VS2012女孩」這個網頁爲例，它的 Open Graph 資料爲：
view raw gistfile1.html This Gist brought to you by GitHub.
關於更詳細的說明，能夠參考 IE官方部落格中的 Sharing Links from IE10 on Windows 8 一文。
固定網站到開始畫面
自從 IE9 開始加入了固定網站 (pinned sites) 的功能，使用者能夠將網頁釘在桌面下方的工做列上，搭配對應的 meta 標籤，就能夠自訂跳躍清單 (在固定的 icon 上按右鍵的菜單) 以及通知的功能，關於固定網站的介紹，能夠參考這一頁的說明。
固然在桌面版的 IE10 仍舊支持了固定網站的功能，而 Modern IE 也能夠固定到開始畫面，除了延用 IE9 的跳躍清單設定方式以外，還可以自訂動態磁貼上的圖案及顏色、產生通知訊息。
要設定動態磁貼上的圖示以及動態磁貼顏色，只要使用下面這樣的 meta 標籤即可以設定：
<meta name="msapplication-TileImage" content="圖標路徑"/>
<meta name="msapplication-TileColor" content="顏色代碼"/>
view raw gistfile1.html This Gist brought to you by GitHub.
而若要產生通知的訊息及數量，也能夠設定一個 XML 文件如：
<?xml version="1.0" encoding="utf-8" ?>
<badge value="5" />
view raw gistfile1.xml This Gist brought to you by GitHub.
而後再到網頁中加入下列的 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 的菜單增長了直接前往應用市場下載的選項：
<meta name="msApplication-ID" content="App">
<meta name="msApplication-PackageFamilyName" content="應用程序套件名稱">
以一款知名的遊戲 Cut The Rope 爲例，它在網站上作了一個 HTML5-based 的版本，使用者除了能夠直接用 Modern IE 連到 http://cuttherope.ie/ 來玩遊戲，也能夠從菜單中找到 Windows 應用市場 Cut The Rope 的 app 選項，查看網站上的代碼，就能夠發現它設定爲：
view raw gistfile1.html This Gist brought to you by GitHub.
這樣便會在菜單中出現到 Windows 應用市場下載的選項或是直接開啓已安裝的應用程序。
菜單中加入了移至 Cut the Rope 應用程序的選項
結論
Windows 8 上的 IE10 (或 Modern IE) 隨著 Windows 8 的 reimagine 後也加入了不少新的特點，若是在網頁設計上多將這些因素考慮進去，想必您的網頁會在 Windows 8 的使用者中更受歡迎！