您的位置：網(wǎng)站首頁(yè) > 電器維修資料網(wǎng) > 正文 >
如何完美打造Win8 Metro版IE10瀏覽器頁(yè)面
來(lái)源： 日期：2013-11-24 19:10:48 人氣：標(biāo)簽：
internet explorer 技術(shù)展示網(wǎng)頁(yè)
目錄
1.使用 html5 相關(guān)技術(shù)
2.運(yùn)用 css3 作樣式設(shè)計(jì)
3.關(guān)于 flash 支持
4.適應(yīng)瀏覽模式landscape 或 portrait 模式
snapped 模式或 fill 模式顯示
為觸控操作優(yōu)化友善表單輸入
5.觸控及手勢(shì)操作
6.融合于 windows 8
分享網(wǎng)頁(yè)內(nèi)容
固定網(wǎng)站及跳躍清單
與 windows 應(yīng)用市場(chǎng)結(jié)合
使用 html5 相關(guān)技術(shù)
ie 自從 ie9 開始大量支持 html5 等相關(guān)新技術(shù)，到了 ie10 更加完整，原本必須要靠插件 (plugins, activex 等) 或是圖片技巧所做出來(lái)的效果，現(xiàn)在大部份都能以 html5 相關(guān)技術(shù)實(shí)作出來(lái)。比如說(shuō)：
1.影音文件可以使用 <video> 及 <audio> 標(biāo)簽來(lái)播放
2.若要 2d/3d 繪圖，可以使用 <canvas> 標(biāo)簽以及 svg 來(lái)搭配使用
3.文件操作可以使用 file api
4.進(jìn)階的 ajax 操作 (如:文件上傳) 可以使用 xmlhttprequest2
5.拖拉操作 (drag-and-drop) 可以使用 drag and drop api
6.資料庫(kù)可以使用 indexeddb
...
想要了解 ie10 究竟支持多少 html5 相關(guān)技術(shù)，請(qǐng)參考 ie10 開發(fā)者指南 - html5 章節(jié)。
運(yùn)用 css3 作樣式設(shè)計(jì)
ie10 也大量支持 css3 許多規(guī)格，像是：
1.使用 css3 animation 制作網(wǎng)頁(yè)動(dòng)畫
2.使用 css3 transition 設(shè)定網(wǎng)頁(yè)元素過(guò)場(chǎng)特效
3.使用 css3 transformation 來(lái)改變網(wǎng)頁(yè)元素的縮放、位移或旋轉(zhuǎn)
4.使用 css grid layout、css multi-column layout 或 css flexible box 等來(lái)作排版
5.使用 css3 gradients 制作漸層色彩效果
...
想要了解 ie10 究竟支持多少 css3 規(guī)格，請(qǐng)參考 ie10 開發(fā)者指南 - css 章節(jié)。
關(guān)于 flash 支持
在大部份的情況下，modern ie 不支持任何 plugins/activex ，如果你的網(wǎng)頁(yè)非得用 plugins/activex，那可以使用一些方法要求使用者切換到桌面版的 ie 來(lái)開啟網(wǎng)頁(yè)，只要在網(wǎng)頁(yè)中加入:
或是由服務(wù)器送出的回應(yīng)標(biāo)頭加入這一項(xiàng)：
x-ua-compatible: requiresactivex=true
modern ie 就會(huì)出現(xiàn)一個(gè)提示訊息，告訴使用者可以切換至桌面版 ie 來(lái)開啟該網(wǎng)頁(yè)。
提示使用者使用桌面版的 ie 來(lái)開啟頁(yè)面
然而，微軟維護(hù)了一份 flash 支持清單，若是 modern ie 瀏覽在支持清單中的網(wǎng)站，就會(huì)開啟 flash 的支持功能，若您要申請(qǐng)加入支持清單，可參考更詳細(xì)的說(shuō)明： ie 開發(fā)指南 - windows 8 中內(nèi)容需使用 adobe flash player 之網(wǎng)站的開發(fā)人員指導(dǎo)方針 一文。
適應(yīng)瀏覽模式
modern ie 使用的情境有下列幾種：
1.landscape 或是 portrait 瀏覽
不論是 windows 8 (pro) 或 windows rt，當(dāng)使用者在平板上使用 modern ie10 的時(shí)候，可能會(huì)以 landscape 或是 portrait 模式來(lái)瀏覽網(wǎng)頁(yè)：
landscape 模式瀏覽網(wǎng)頁(yè)
portrait 模式瀏覽網(wǎng)頁(yè)
因應(yīng)這兩種瀏覽模式的改變，可以使用 css3 media query 語(yǔ)法來(lái)讓瀏覽器套用對(duì)應(yīng)的樣式：
@media screen and (orientation: landscape) {
/* 這裡填入在 landscape 模式瀏覽時(shí)使用的樣式 */
@media screen and (orientation: portrait) {
/* 這裡填入在 portrait 模式瀏覽時(shí)使用的樣式 */
view raw gistfile1.css this gist brought to you by github.
如果要限定可視區(qū)域的大小，可以使用 css device adaption 語(yǔ)法: @-ms-viewport 語(yǔ)法 (規(guī)格中是 @viewport) 來(lái)指定，像是這樣：
@media screen and (orientation: landscape) { @-ms-viewport { width: 1024px; height: 768px; } /* 在 landscape 模式下，并且把可視區(qū)域的大小設(shè)為 1024px * 768px */}@media screen and (orientation: portrait) { @-ms-viewport { width: 768px; height: 1024px; } /* 在 portrait 模式下，并且把可視區(qū)域的大小設(shè)為 768px * 1024px */}@-ms-viewport { width: device-width; /* 根據(jù)目前裝置的畫面寬度來(lái)設(shè)定可視區(qū)域的寬 */}view raw gistfile1.css this gist brought to you by github.
如果要了解更詳細(xì)的設(shè)定語(yǔ)法，可以參考ie10 開發(fā)人員指南 - 裝置適應(yīng)一文。
snapped 模式或 fill 模式顯示
在 windows 8 中，(當(dāng)屏幕解析度高于 1366x768, 且為 landscape 模式) 使用者可以將 windows 應(yīng)用市場(chǎng)應(yīng)用程序 snapped 在畫面的左右兩側(cè)，而其餘的顯示區(qū)域則稱為 fill。modern ie 當(dāng)然也可以支持snapped 及 fill 顯示，此時(shí)網(wǎng)頁(yè)也可以像前一個(gè)例子一樣，使用 css3 media query 語(yǔ)法來(lái)套用不同的樣式。
modern ie10 以填滿模式顯示
像是這樣：
@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
/* 當(dāng) modern ie10 在貼齊模式時(shí)的樣式設(shè)定，并且將可視區(qū)域設(shè)為 320px */
}
view raw gistfile1.css this gist brought to you by github.
為觸控操作優(yōu)化
在平板上使用 modern ie，主要的輸入方式都是觸控操作，傳統(tǒng)的網(wǎng)頁(yè)多是以鍵盤鼠標(biāo)的操作來(lái)設(shè)計(jì)，在加入觸控操作的思維下，網(wǎng)頁(yè)設(shè)計(jì)人員開始注意鏈接、按鈕可能要更大一點(diǎn)適合手指點(diǎn)擊 (若是預(yù)設(shè)的元件，像 modern ie本來(lái)就會(huì)以適合手指操作的大小來(lái)呈現(xiàn))。然而還有一些細(xì)節(jié)也值得注意：
適應(yīng)表單輸入
在 html5 的規(guī)格中定義了一些新的表單輸入元件的類別，像是 email 或網(wǎng)址的輸入，除了可以搭配 javascript api 來(lái)做資料格式驗(yàn)證之外，在 modern ie 中還可以根據(jù)這樣的類別來(lái)改變虛擬鍵盤的布局。像是使用 <input type="email" > 時(shí)，當(dāng)使用者要輸入資料時(shí)，虛擬鍵盤就會(huì)加入 @ 字元還有 .com 方便輸入：
適合 email 輸入的鍵盤布局
以下分別是使用 <input type="tel" > 及 <input type="url" > 的虛擬鍵盤布局:
觸控及手勢(shì)操作
要撰寫觸控操作的相關(guān)代碼，第一步就是要先偵測(cè)使用者的裝置是否支持觸控、以及支持到幾點(diǎn)觸控，這部份只要通過(guò)檢查 navigator.msmaxtouchpoints > 1 就可以了 (而這個(gè)屬性的值便是支持幾點(diǎn)觸控)
而另一個(gè)要注意的細(xì)節(jié)是，windows 8 本身就有許多觸控手勢(shì)的操作，如果你的某些操作需要手勢(shì)或觸控，而又不希望它觸發(fā)系統(tǒng)的觸控操作 (比方說(shuō)，你想要支持向下滑動(dòng)的手勢(shì)，但又不希望觸發(fā) windows 應(yīng)用市場(chǎng)應(yīng)用程序關(guān)閉的動(dòng)作)，可以在需要偵測(cè)手勢(shì)的元件上使用 css 語(yǔ)法 -ms-touch-action 來(lái)設(shè)定是否要支持系統(tǒng)的觸控手勢(shì)，或是完全自訂。舉例來(lái)說(shuō)，如果：
#myarea { -ms-touch-action: double-tap-zoom; }
則表示在 #myarea 的元素中，不使用其它預(yù)設(shè)的手勢(shì)操作，只接受點(diǎn)擊兩下放大的操作，若是要完全自訂所有的觸控操作，則可以使用：
#myarea { -ms-touch-action: none; }
剩下就可以純粹使用 mousedown 或是 mspointerdown (統(tǒng)整 mouse/pen/touch) 等相關(guān)事件來(lái)設(shè)計(jì)。這部份可以參考 ie 官方部落格中的 touch input for ie10 一文。
而若要支持 drag-and-drop 或是其它的手勢(shì)，也可以參考 ie 官方部落格中的 go beyond pan, zoom, and gesture 一文來(lái)了解如何運(yùn)用手勢(shì)操作的事件。
關(guān)于更多在 modern ie 上觸控優(yōu)化的介紹，可參考 ie 開發(fā)者指南 - 使你的網(wǎng)站支持觸控操作 一文。
融合于 windows 8
如果你希望你的網(wǎng)站在 modern ie 上能與 windows 8 有更多的整合，其實(shí)只要注意幾個(gè) windows 8 的細(xì)節(jié)以及 ie 所提供的功能就可以了。
分享網(wǎng)頁(yè)內(nèi)容
在 windows 8 之中，使用者隨時(shí)可以使用從屏幕右側(cè)滑出的 charms 上的分享功能，將他正在使用的 windows 應(yīng)用市場(chǎng)應(yīng)用程序，通過(guò)某個(gè)支持分享功能的 windows 應(yīng)用市場(chǎng)應(yīng)用程序?qū)⒛硞�(gè)資訊分享出去 (若該應(yīng)用程序有實(shí)作這部份的功能)。而在 modern ie 也可以結(jié)合這個(gè)功能，像是這樣：
選擇使用郵件程序作分享，郵件程序會(huì)抓取網(wǎng)頁(yè)概要內(nèi)容及 url 分享
而你若希望分享資訊的程序 (如: 郵件) 在抓取網(wǎng)頁(yè)內(nèi)容時(shí)抓取合適的資料，那可以在網(wǎng)頁(yè)中遵照 open graph 的格式 (facebook, google+ 也是使用這個(gè)資訊) 加入適當(dāng)?shù)?meta 標(biāo)簽，如此一來(lái)，像是標(biāo)題、摘要或是縮圖就可以按照你設(shè)定的 open graph 資料來(lái)顯示。以「vs2012女孩」這個(gè)網(wǎng)頁(yè)為例，它的 open graph 資料為：
<meta property="og:title" content="visual studio 2012 選你心中的女孩"><meta property="og:description" content="現(xiàn)在將由 visual studio 2012 女孩為你介紹這三大優(yōu)勢(shì)，并由你決定誰(shuí)是 終的 visual studio 2012 女孩！"><meta property="og:image" content="http://vs2012girls.blob.core.windows.net/assets/fbog.png">view raw gistfile1.html this gist brought to you by github.
關(guān)于更詳細(xì)的說(shuō)明，可以參考 ie官方部落格中的 sharing links from ie10 on windows 8 一文。
固定網(wǎng)站到開始畫面
自從 ie9 開始加入了固定網(wǎng)站 (pinned sites) 的功能，使用者可以將網(wǎng)頁(yè)釘在桌面下方的工作列上，搭配對(duì)應(yīng)的 meta 標(biāo)簽，就可以自訂跳躍清單 (在固定的 icon 上按右鍵的菜單) 以及通知的功能，關(guān)于固定網(wǎng)站的介紹，可以參考這一頁(yè)的說(shuō)明。
當(dāng)然在桌面版的 ie10 仍舊支持了固定網(wǎng)站的功能，而 modern ie 也可以固定到開始畫面，除了延用 ie9 的跳躍清單設(shè)定方式之外，還能夠自訂動(dòng)態(tài)磁貼上的圖案及顏色、產(chǎn)生通知訊息。
要設(shè)定動(dòng)態(tài)磁貼上的圖示以及動(dòng)態(tài)磁貼顏色，只要使用下面這樣的 meta 標(biāo)簽便可以設(shè)定：
<meta name="msapplication-tileimage" content="圖標(biāo)路徑"/>
<meta name="msapplication-tilecolor" content="顏色代碼"/>
view raw gistfile1.html this gist brought to you by github.
而若要產(chǎn)生通知的訊息及數(shù)量，也可以設(shè)定一個(gè) xml 文件如：
<?xml version="1.0" encoding="utf-8" ?>
<badge value="5" />
view raw gistfile1.xml this gist brought to you by github.
然后再到網(wǎng)頁(yè)中加入下列的 meta 標(biāo)簽設(shè)定：
<meta name="msapplication-badge" content="重讀間隔時(shí)間 (ms); polling-uri=xml文件網(wǎng)址">
關(guān)于更詳細(xì)的 modern ie 固定網(wǎng)站的介紹，可以參考 ie官方部落格中的 high quality visuals for pinned sites in windows 8。
與 windows 應(yīng)用市場(chǎng)結(jié)合
windows 8 / windows rt 開始有了 windows 應(yīng)用市場(chǎng)，使用者可以從應(yīng)用市場(chǎng)中搜尋、下載安裝 apps，如果你的網(wǎng)頁(yè)本身有 apps 在應(yīng)用市場(chǎng)中，或是互相關(guān)連，則可以在網(wǎng)頁(yè)中加入下列的 meta 標(biāo)簽，讓 modern ie 的菜單增加了直接前往應(yīng)用市場(chǎng)下載的選項(xiàng)：
<meta name="msapplication-id" content="app">
<meta name="msapplication-packagefamilyname" content="應(yīng)用程序套件名稱">
以一款知名的游戲 cut the rope 為例，它在網(wǎng)站上做了一個(gè) html5-based 的版本，使用者除了可以直接用 modern ie 連到 http://cuttherope.ie/ 來(lái)玩游戲，也可以從菜單中找到 windows 應(yīng)用市場(chǎng) cut the rope 的 app 選項(xiàng)，查看網(wǎng)站上的代碼，就可以發(fā)現(xiàn)它設(shè)定為：
view raw gistfile1.html this gist brought to you by github.
這樣便會(huì)在菜單中出現(xiàn)到 windows 應(yīng)用市場(chǎng)下載的選項(xiàng)或是直接開啟已安裝的應(yīng)用程序。
菜單中加入了移至 cut the rope 應(yīng)用程序的選項(xiàng)
結(jié)論
windows 8 上的 ie10 (或 modern ie) 隨著 windows 8 的 reimagine 后也加入了很多新的特色，如果在網(wǎng)頁(yè)設(shè)計(jì)上多將這些因素考慮進(jìn)去，想必您的網(wǎng)頁(yè)會(huì)在 windows 8 的使用者中更受歡迎！
【看看這篇文章在百度的收錄情況】
0731-85579057 ，
送.jpg)
