企業IT管理員IE11升級指南 系列：

Win7和Win8.1上的IE11功能對比

在 HTML5 視訊、觸控支援、裝置和螢幕方向 API、Windows 整合和效能方面，Windows 8.1 上的 Internet Explorer 11 與 Windows 7 上的 IE11 之間有許多不同。

裝置方向事件

Internet Explorer 11 利用裝置方向和移動事件、全屏模式程式設計控制，以及將螢幕鎖定在特定方向的能力，讓你能夠更好地控制網站和應用的顯示。

IE11 添加了對 DOM 事件的支援，DOM 事件提供了新興的 W3C 

要點  此功能在 Windows 7 上的 IE11 中不受支援。

若要了解詳細資訊，請參閱裝置方向事件。

拖放觸控支援

Internet Explorer 11 引入了對基於觸控的 HTML5 拖放的本機支援。

向你的 Web 應用新增拖放功能為使用者提供直觀的方式來從一個位置向另一個位置移動或複製檔案，或者直觀地重排集合中的專案。就像 Internet Explorer 預設提供基本觸控支援一樣，使用 HTML5 拖放的大多數現有站點應該“恰好能夠”與“按下、按住，然後拖動”使用者互動模式配合使用。雖然你會像預期的那樣收到 UI 執行緒上的使用者輸入事件，但 IE 實際上是在單獨的一個執行緒上處理通過 ghost 操作得到的拖動影象呈現和動畫，以使你的站點儘可能處於響應性較好的狀態。

要點  此功能在 Windows 7 上的 IE11 中不受支援。

UX 模式

按下、按住，然後拖動

對於為 Web 內容提供服務的觸控裝置，針對拖放的一種常用使用者互動模式就是 “按下、按住，然後拖動”這個序列。在 IE11 中，這是具有 draggable 屬性的元素的預設行為。很多站點具備“位於摺疊位置以下”的內容，需要依靠垂直平移/滾動才能看到，採用新 Windows UI 的 Internet Explorer 提供了通過水平輕掃向後/向前導航功能。因此，基於觸控的拖放的“按下、按住，然後拖動”模式通常最適合與採用 IE11 的網站一起使用,而“橫向滑動”模式是針對 Windows 應用商店應用的有效方法。

注意  對基於觸控的拖放操作的支援限於單個瀏覽器視窗。雖然不可能跨視窗拖動元素，但支援從 Windows “桌面”將檔案物件拖動到桌面中的 IE11 視窗中。

橫向滑動

很多 Windows 應用商店應用和某些網站使用平面導航系統，這種情況下使用者在單個頁面上平移和/或在站點相同層次結構級別上駐留的頁面中導航。使用橫向滑動互動模式，這些應用可以消除使用者相對於拖動平移的意圖，方法是僅允許使用 touch-action 屬性在一個軸上平移：

CSS

touch-action: pan-x;

為了改善橫向滑動使用者體驗，IE11 和 Windows 應用商店應用在 touch-action 屬性中引入了 cross-slide-x 和 cross-slide-y 值。這些值請求 IE（或 Windows 執行時，如果是 Windows 應用商店應用）響應在獨立於 UI 的執行緒上使用橫向滑動動畫進行的某些使用者互動。

此外，IE11 和 Windows 應用商店應用還提供了幾個新的狀態值，以供進一步微調 MSManipulationEvent 的處理：

效果批處理和筆劃改進功能

IE11 和 Windows 8.1 的使用 JavaScript 的 Windows 應用商店應用利用 Windows 8.1 中的 Direct2D 升級來改善圖形效果和筆劃效能。

因為它們使用多種中間紋理，所以陰影和複合操作等 Canvas 效果、SVG 濾鏡效果、CSS 邊框陰影和文字陰影都 非常耗費資源。IE11 和利用 Windows 8.1 中對 DirectImage 批處理行為的更改來更有效地聯合 Direct3D Draw 呼叫，將對裝置狀態的更改減到最少。此更改會提升 Canvas、SVG 和 CSS 效果的效能，並會通過降低所使用中間值的個數來提升記憶體。

筆劃是遊戲和應用中使用的常見模式，用於繪製細線或輪廓線。使用 JavaScript 的 IE11 和 Windows 應用商店應用使用新的筆劃演算法，極大地提升了 Canvas 和 SVG 中的筆劃效能。

要點  此功能在 Windows 7 上的 IE11 中不受支援。

加密的媒體擴充套件

IE11 引入了對 HTML5 加密媒體擴充套件 (EME) 的支援。 EME 擴充套件了 video 和 audio 元素，從而可以在不使用外掛的情況下啟用受數字版權管理 (DRM) 保護的內容。 EME 在使用 Windows 8.1 的 IE11 和使用 JavaScript 的 Windows 應用商店應用中受支援。

要點  此功能在 Windows 7 上的 IE11 中不受支援。

以下是與 EME 一起使用的一些主要 API。

F12 開發人員工具 UI 響應

當 Windows 7 並非處於最新更新時，Windows 7 上的 IE11 可能會禁用 F12 工具中的 UI 響應工具。如果 UI 響應工具無法在 Windows 7 上安裝的 IE11 中正常工作，請確保已經安裝 Windows 更新中的所有可用更新。

高 DPI 支援

Internet Explorer 11 針對高 DPI 螢幕和小型平板電腦提供了增強的縮放功能，從而確保 Windows 8.1 裝置上網站文字、觸控目標以及佈局的一致性。 特別是，IE11 引入了以下高 DPI 改進。

要點  除了 devicePixelRatio 屬性外，此處列出的功能在 Windows 7 上的 IE11 中不受支援。

支援 devicePixelRatio 屬性

儘管自帶有 deviceXDPI 和 deviceYDPI 屬性的 Microsoft Internet Explorer 6 以來提供了裝置解析度（也可以通過自 Windows Internet Explorer 9 開始的“媒體查詢 resolution”獲取），“devicePixelRatio”屬性已迅速成為 Web 上使用的 de-facto 標準。IE11 添加了對此屬性的支援，提供物理裝置畫素與進行了 DPI 調整的邏輯 CSS 畫素之間的比率。使用早期版本的 IE，必須執行以下公式才能獲取此相同值：

比例係數選擇改善

IE11 已改進了用於確定最優比例係數的邏輯，合併了觀看距離考慮事項、多種預設比例係數選擇以及多種其他變數。

使用 IE11，採用新的 Windows UI 中的 Internet Explorer 和桌面版 Internet Explorer 對於較大範圍的預設比例係數的支援相同。在跨不同的裝置外形尺寸和螢幕解析度以一致方式觀看網站方面，OEM 和 Windows 8.1 客戶有了更大的靈活性。

多個監視器支援

因為 Windows 8 使用單一 DPI 設定，所以，如果你使用具有不同 DPI 的多個監視器，就會在至少一臺監視器上得到次優比例係數。IE11 添加了按監視器的縮放支援，這樣當你在不同監視器之間拖動視窗時，Web 內容會自動縮放到正確的級別。這在從高 DPI 裝置投影時特別有用，因為投影儀通常採用低 DPI 顯示器。

統一的視覺縮放模型

Windows Internet Explorer 8 和 Internet Explorer 9 使用“佈局縮放”模型處理所有縮放，該模型縮放除視區寬度之外的所有內容的大小，並使用內容的新的較大大小重新計算頁面佈局。Internet Explorer 10 添加了一種替代性的簡單縮放模型，即“視覺縮放”，該模型僅縮放原始的 100% 佈局（因而避免了頁面的重新佈局）。

使用 IE11，現在所有縮放都使用視覺縮放處理，使跨縮放方案（如縮放選單、收縮縮放、鍵盤/滑鼠快捷方式、貼靠檢視、@-ms-viewport 和 msContentZoomFactor）的體驗更簡單，可預測性更強。

相容性注意

如果你的網站仍在使用傳統文件模式（特別是，針對 Internet Explorer 9 或更早版本的文件模式），則 Windows 8.1 上的 IE11 將使用自然文字指標來呈現你的站點，以避免常見於採用非 100% 縮放級別的傳統文件模式的前端呈現中的常見故障（例如核心支援降級）。

如果希望退出此預設行為，則可以使用以下 HTTP 頭或 <meta> 標記：

HTML

X-UA-TextLayoutMetrics: gdi

HTML

<meta http-equiv="X-UA-TextLayoutMetrics" content="gdi" />

懸停觸控支援

Windows 8.1 上的 Internet Explorer 11 已通過“長按”使用者互動模式內建對需要使用懸停的常用 UX 方案（例如懸停選單）的觸控支援。

要點  此功能在 Windows 7 上的 IE11 中不受支援。

鑑於滑鼠或筆輸入裝置可以懸停在某個元素上而無需啟用該元素，沒有提供將游標懸停在頁面元素上的觸控模擬。如果觸控某個元素（如下拉選單的標題），則同時懸停元素（展開選單）並激活該元素（導航至選單標題連結），使其無法從下拉選單選擇其他選項。

從 Windows 8 的 Internet Explorer 10 開始，可以使用 aria-haspopup 屬性來指示元素已隱藏懸停內容，以便第一次點選時 IE 模擬懸停，而不是啟用連結。

對於 Windows 8.1 上的 IE11，觸控裝置使用者可以通過簡單直觀的手勢區分懸停（長按）與單擊（點選）。

在 Internet Explorer 10 中，“長按”手勢會啟用頁面上下文選單（“複製”、“開啟連結”等），這會阻礙懸停選單的可見性。現在，在 IE11 中，頁面上下文選單作為 Windows “應用欄”出現在頁面底部。

從 Internet Explorer 10 開始，可以通過在元素上指定 aria-haspopup="false" 禁用任何指定元素的所有觸控懸停模擬功能（不管是通過“點選”還是“長按”）。

連結突出顯示

在 IE11 中點選連結時，你會看到突出顯示已改進，可以針對頁面上的觸控定位的內容提供更快更準確的可視指示。現在，Windows 8.1 上的此體驗與在 Windows Phone 8 上的該體驗類似。在 IE11 中，連結突出顯示：

• 同時應用於連結的文字和影象
• 僅應用於觸控（在 Internet Explorer 10 中，連結突出顯示還應用於滑鼠）     
• 不影響頁面上的 CSS

如果不願意使用連結突出顯示，則可以在頁面上指定以下 meta 標記：

HTML

<meta name="msapplication-tap-highlight" content="no" />

這將在 Windows 8.1 上的 IE11 和 Windows Phone 8 上的 Internet Explorer 10 中都禁用觸控點選連結突出顯示。

要點  此功能在 Windows 7 上的 IE11 中不受支援。

媒體源擴充套件

IE11 通過 HTML5 媒體源擴充套件 (MSE) 引入了對 MPEG-DASH 媒體流的支援。MSE 擴充套件 video 和 audio 元素，你可以動態更改它們以在不使用外掛的情況下獲取媒體流。這樣，你可以對自適應媒體流、實時流、拼接視訊和視訊進行編輯。

要點  此功能在 Windows 7 上的 IE11 中不受支援。

你可以使用 MSE 構建自定義自適應流解決方案。 這種自適應流解決方案會根據網路頻寬和 CPU 使用率尋找最佳位元率，從而提供最高質量的流體驗。例如，如果網路頻寬下降，你可以使用 MSE 以程式設計方式將視訊流切換到較低的位元率。 這會降低影象質量，但可以保持視訊無中斷播放。

通過動態拼接視訊，可以在媒體播放過程中插入廣告。因此，不必事先在媒體檔案中放入剪輯，而在播放過程中隨時向媒體流中插入剪輯。

下面是一些重要的 MSE API：

電話號碼格式識別

Internet Explorer 11 可自動將電話號碼轉換為可單擊的連結。 此功能在你擁有 Skype 等可以處理電話號碼的應用時有效。

本文從開發人員的角度介紹電話號碼檢測功能，包括用於啟用此功能的 HTML 元素以及在必要時如何關閉此功能。

瞭解電話號碼檢測

當採用全新 Windows UI 的 Internet Explorer 遇到使用支援的 HTML 元素呈現的內容中所包含的電話號碼時，會將電話號碼轉換為可單擊的連結（無需修改 DOM 即可完成此轉換）。 當用戶單擊該連結時，將呼叫註冊到 "tel" URI 協議的應用。

注意  桌面版 Internet Explorer、託管 WebBrowser 控制元件的應用程式或適用於 Windows 7 的 IE11 不支援電話號碼格式識別。

電話號碼檢測功能對下列內容模式起作用：

<element>425-882-8080</element>

425.<element>882</element>.8080

(425) 882-8080

電話號碼也為跨內聯元素的一系列實體所識別。 這意味著 display 屬性必須設定為 "inline"。

在前面顯示的模式中，"<element>" 指下列 HTML 元素之一：

不過，存在一些例外。 當 contentEditable 屬性設定為 "true" 時，將禁用電話號碼格式識別。 通過組策略或使用者首選項也可以禁用電話號碼格式識別。

固定站點增強功能

Internet Explorer 11 中對固定站點的更改支援動態磁貼，使站點在固定這些磁貼或將其另存為收藏夾或者顯示為常用站點時更有視覺吸引力。 動態磁貼可讓客戶與你的網站建立更密切的聯絡，並建立自定義的“開始”螢幕體驗。

設定動態磁貼和通知

IE11 提供以下三種方式來定義固定站點的自定義動態磁貼和通知：

• 使用 HTML 指定固定網站元資料：

HTML

  <meta name="application-name" content=" Contoso" />
  <meta name="msapplication-TileColor" content=" #009900" />
  <meta name="msapplication-square70x70logo" content="images/smalltile.png" />
  <meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
  <meta name="msapplication-wide310x150logo" content="images/widetile.png" />
  <meta name="msapplication-square310x310logo" content="images/largetile.png" />
  <meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml; polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />

• 使用 JavaScript 設定定期通知：

JavaScript

document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false);
 
  function StartPeriodicUpdateBatch()
  {
      var arrURI = ["notifications/contoso1.xml", "notifications/contoso2.xml", "notifications/contoso3.xml"];
      window.external.msEnableTileNotificationQueue(true);
      window.external.msStartPeriodicTileUpdateBatch(arrURI);

}

• 使用 XML  瀏覽器配置檔案，然後從網頁的標記中呼叫這些檔案：

XML

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
    <notification>
      <polling-uri  src="notifications/contoso1.xml"/>
      <polling-uri2 src="notifications/contoso2.xml"/>
      <polling-uri3 src="notifications/contoso3.xml"/>
      <frequency>30</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>

使用 meta 元素載入瀏覽器配置檔案：

HTML

<meta name="msapplication-config" content="IEconfig.xml" />

若要取消瀏覽器配置檔案，請將 meta 元素的 content 屬性設定為“無”""。

有關詳細資訊，請參閱：

動態磁貼和通知的新增功能

IE11 添加了元資料值，使你可以將站點固定到 Windows“開始”螢幕：

注意  磁貼影象的大小必須小於 200 KB，並且不超過 1024x1024 畫素。

有關固定網站元資料的詳細資訊，請參閱：

此外，IE11 提供了新的方法、函式和事件來支援通知：

固定網站功能更改

從 IE11 開始，不再支援以下固定站點功能，或者已通過需要更改程式碼的方式修改了這些功能：

• Site mode，在 Internet Explorer 8 中引入。 若要確定某固定網站是否從 Windows“開始”螢幕啟動，請改用 msPinnedSiteState。
• 只有桌面版的 Internet Explorer 才支援跳轉列表。 這會影響以下 API：

使用這些功能更新任意固定網站。

螢幕方向 API

使用 IE11 中介紹的 W3C 螢幕方向 API，你可以檢測螢幕的當前方向，在方向改變時得到通知，並能夠將方向鎖定到特定狀態。

此功能在 Windows 7 上的 IE11 中不受支援。

有關詳細資訊，請參閱螢幕方向 API。

使用觸控和其他輸入方式滾動和縮放

Windows 8.1 上的 Internet Explorer 11 建立於通過以下方法對滾動和縮放進行微調控制：通過新增對其他輸入型別（如觸控板、滑鼠以及鍵盤）的支援在 Windows 8 上的 Internet Explorer 10 和 Windows 應用商店應用中引入觸控以及通過達到滾動和縮放動畫效果的新方法。.

要點  此功能在 Windows 7 上的 IE11 中不受支援。

此功能由 Windows 直接操作 API 提供，但通過一系列 CSS 屬性和 DOM 屬性與方法（如 msContentZoomFactor 和 msZoomTo）對你的網頁和應用公開。使用“直接操作”，系統會處理觸控輸入並在委託執行緒中提供內建互動反饋動畫，從而釋放 UI 執行緒以響應 Web 應用的指令碼和指令碼驅動的動畫。

msZoomTo 方法

新的 msZoomTo 方法使用動畫滾動和/或縮放元素至其指定的座標。它提供了簡單的高效能方法來在網站中和使用 JavaScript 的 Windows 應用商店應用中實現動畫滾動導航並取得系統性縮放效果。 在使用 JavaScript 的 Windows 應用商店應用中，此方法用於 FlipView 控制、“應用欄”和分頁方案。

例如，可以使用 msZoomTo 放大元素，同時保持其在視區中居中：

JavaScript

var args = {
    contentX: target.offsetLeft + target.offsetWidth/2;
    contentY: target.offsetTop + target.offsetHeight/2;
    scaleFactor: 2.0;
}
zoomer.msZoomTo(args);

對在輸入裝置上滾動、平移和縮放進行微調

IE11 支援對 CSS 和 DOM 屬性使用更多輸入型別來微調在 Windows 8 上的 Internet Explorer 10 中引入的通過觸控滾動和縮放。特別是，已為 IE11 新增以下支援：

• 滑鼠、鍵盤以及觸控板的滾動/平移吸附點支援
• 滾動軌道並縮放連結、限制以及觸控板互動的吸附點支援

如果你已經在使用這些屬性，則 IE11 中新增的這項支援應該無需對現有程式碼進行任何更改即可正常起作用。

跨裝置同步

使用 Windows 8.1 上的 IE11 中的同步選項卡和使用者設定可使你的使用者跨其裝置無縫檢視你的站點並與之互動。Windows 8.1 上的 IE11 的新增同步功能是以裝置切換為指導思想設計的。當用戶離開某個裝置時，所有開啟的選項卡（InPrivate 瀏覽選項卡除外）都使用 Microsoft OneDrive 伺服器進行同步，因此使用者在另一裝置上開啟 IE 時，可以隨時使用這些選項卡。

注意  像 Windows 上使用該同步平臺的其他應用一樣，OneDrive 中的同步 IE 資料對使用者也不可見。使用者能夠在 IE 中看到自己的同步資料。

同步的選項卡在採用 Windows UI 的 Internet Explorer 和桌面版 Internet Explorer 中都有入口點。

在 IE11 中同步其他設定和使用者首選項時，不必在新裝置上配置 IE11。預設情況下會同步使用者配置的設定和首選項。

此表顯示了 Windows 8.1 上的 IE11 中的同步功能相對於 Windows 8 上的 Internet Explorer 10 的改進：

要點  此功能在 Windows 7 上的 IE11 中不受支援。

TCP 連線共享 (SPDY)

IE11 支援 SPDY/3，它是一種協議，用於定義如何將多個 HTTP 請求多路複用（合併）到一個 TCP 連線。 由此便可以通過減少請求網頁時所需的單獨 TCP 連線數量來提高效能。

要點  此功能在 Windows 7 上的 IE11 中不受支援。