您的位置：網站首頁 > 電器維修資料網 > 正文 >

如何完美打造Win8 Metro版IE10瀏覽器頁面

★★★★★【文章導讀】：如何完美打造Win8 Metro版IE10瀏覽器頁面具體內容是：internetexplorer技術展示網頁目錄1.使用html5相關技術2.運用css3作樣式設計3.關于flash支持4.適應瀏覽模式landscape或portrait模式snapped模式或fill模式顯示為觸控操作優化友善表單輸入5.觸控及手勢操作6.融合于wi…

來源：日期：2013-11-24 19:10:48 人氣：標簽：

internet explorer 技術展示網頁

1.使用 html5 相關技術

2.運用 css3 作樣式設計

3.關于 flash 支持

4.適應瀏覽模式landscape 或 portrait 模式

snapped 模式或 fill 模式顯示

為觸控操作優化友善表單輸入

5.觸控及手勢操作

6.融合于 windows 8

分享網頁內容

固定網站及跳躍清單

與 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) 來指定，像是這樣：

@media screen and (orientation: landscape) { @-ms-viewport { width: 1024px; height: 768px; } /* 在 landscape 模式下，并且把可視區域的大小設為 1024px * 768px */}@media screen and (orientation: portrait) { @-ms-viewport { width: 768px; height: 1024px; } /* 在 portrait 模式下，并且把可視區域的大小設為 768px * 1024px */}@-ms-viewport { width: device-width; /* 根據目前裝置的畫面寬度來設定可視區域的寬 */}

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 貼齊在畫面左側

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 也可以結合這個功能，像是這樣：

在瀏覽網頁中，叫出右側的 charms 然后選擇分享

選擇使用郵件程序作分享，郵件程序會抓取網頁概要內容及 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 標簽便可以設定：

view raw gistfile1.html this gist brought to you by github.

而若要產生通知的訊息及數量，也可以設定一個 xml 文件如：

<?xml version="1.0" encoding="utf-8" ?>

view raw gistfile1.xml this gist brought to you by github.

然后再到網頁中加入下列的 meta 標簽設定：

關于更詳細的 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 選項，查看網站上的代碼，就可以發現它設定為：

view raw gistfile1.html this gist brought to you by github.

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