Web 開發人員採用新 Windows UI 進行瀏覽

本文描述在 Windows 8 中,使用者熟悉的 Internet Explorer (傳統型) 和採用新 Windows UI 的 Internet Explorer 頁面在運作時有何不同。它同時也描述了建立觸控優先網站的最佳做法。 這些建議同時適用於 Internet Explorer 10 和更新版本兩種瀏覽體驗。

Windows 8 提供兩種 Internet Explorer 10 瀏覽體驗:使用者熟悉的傳統型瀏覽體驗和新的 Windows 8 瀏覽體驗

從網路堆疊和快取一直到轉換引擎,這兩種瀏覽體驗使用的都是相同的基礎元件,而且兩者會傳送相同的使用者代理字串,並具有相同的文件物件模型 (DOM)。 身為開發人員,請將兩種體驗視為同一個瀏覽器來開發,即 Internet Explorer 10。

ActiveX 和其他二進位擴充性

Windows 8 瀏覽體驗不支援 Microsoft ActiveX 或任何其他二進位擴充性。 為了確保所有客戶都能使用正常運作的網站,請提供不使用外掛程式就能正常運作的體驗環境。 這可以協助所有沒有使用外掛程式進行瀏覽的客戶,不論他們是使用 Windows 8 瀏覽體驗、使用 ActiveX 篩選瀏覽器 附加元件停用外掛程式,還是使用不支援外掛程式的裝置 (例如手機或 Tablet PC) 進行瀏覽。

適當的後援模式

遵循最佳做法先測試標準功能,而只有在需要時才後援使用外掛程式,您的網站將能提供更佳的客戶體驗。 下列範例示範如何偵測及優先使用 HTML5 視訊,再於沒有 video 元素時使用外掛程式:


<video id="video1" width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">

    <object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">

        <p>Please update your browser or install Flash</p>

    </object>
</video>


如需有關跨瀏覽器支援 HTML5 音訊和視訊 (包括轉碼器和輔助字幕) 的詳細資訊,請參閱實用的跨瀏覽器 HTML5 音訊和視訊。 許多網站在不使用外掛程式的情況下提供廣告服務時,已經執行這類的後援模式,這表示這個方法是一個既實用又具彈性的解決方案。

如果您要使用外掛程式讓使用者體驗高質感的網站,請使用下列後援模式:


<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    <param name="SRC" value="http://ie.microsoft.com/testdrive/IEBlog/Common/player.swf?file=video.mp4">

    <video id="video1" width="640" height="360" controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">

        <p>Please update your browser or install Flash</p>

    </video>
</object>


這個模式可以確保所有具外掛程式的使用者都將使用外掛程式,而沒有外掛程式的使用者則會使用原生平台。 如果客戶使用沒有外掛程式或原生支援的瀏覽器,則客戶可以嘗試安裝外掛程式。

短期的解決方案

更新您的網站可能相當費時。 如果您需要暫時建議使用者以 Internet Explorer 10 (傳統型) 檢視您的網站,可以使用 "META" 標籤或 "HTTP" 標頭來更新網站,Windows Internet Explorer 將會通知使用者並提供切換到傳統型瀏覽的選項。


HTTP Header
X-UA-Compatible: requiresActiveX=true
META TAG
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>


附註  請牢記,使用者使用的裝置可能即使在 Internet Explorer (傳統型) 中也不執行現有 ActiveX 控制項,例如手機。 這些裝置中有些可能只有小型螢幕且僅支援觸控輸入,而這些裝置在搭配 ActiveX 控制項或使用傳統型瀏覽時不一定可以正常運作。 強制使用者使用傳統型瀏覽應該是沒有其他後援內容可用時才使用的最後手段。

新 Windows UI 瀏覽體驗問題偵錯

網站在兩種瀏覽體驗之間的唯一行為差異是對於外掛程式的支援。 如果您想要在傳統型瀏覽中模擬沒有外掛程式的使用經驗,並使用 F12 開發人員工具進行網站問題偵錯,請啟用 ActiveX 篩選: "工具 -> 安全性 -> ActiveX 篩選"。

如果您發現網站在運作上的其他差異,請務必在 Connect 中回報問題。

建立觸控優先網站

Windows 8 上的 Internet Explorer 10 是第一個可以讓使用者選擇不同輸入裝置的瀏覽器:觸控、手寫筆以及滑鼠。 使用 Internet Explorer 10 瀏覽您網站的客戶可能會使用一或多個這些輸入裝置。雖然 Windows 8 UI 的設計目的是要提供絕佳的觸控體驗,但部分客戶可能會偏好使用滑鼠和鍵盤,而其他則可能偏好使用觸控輸入搭配熟悉的傳統型體驗。

請注意,不要先假設使用者會使用的輸入方法。 請改用功能偵測來查看裝置可以進行的功能。

偵測觸控輸入

下列範例可以協助您的應用程式判斷是否要提供觸控優先體驗:


if (window.navigator.maxTouchPoints) {
        // user has touch hardware
    }
    else {
        // user does not have touch hardware
    }


如果您想要知道可用的觸控點數目 (例如您的遊戲至少需要三個觸控點),請變更偵測程式碼,如下所示:


    if (window.navigator.maxTouchPoints >= 3) {
        // user has at least three touch points 
    }
    else if (window.navigator.maxTouchPoints) {
        // user has only one or two touch points
    }
    else {
        // user does not have touch hardware
    }


相關主題

準備好迎接無外掛程式的瀏覽

 

 

顯示:
© 2015 Microsoft