IE9引入了Pinned Sites 新概念。Pinned Sites允許用戶把網(wǎng)站像Windows應(yīng)用程序一樣“釘”在Windows 7 任務(wù)欄上。用戶可以直接點擊任務(wù)欄上的圖標打開網(wǎng)站，可以通過Jump list直接訪問網(wǎng)站的各個功能，甚至可以直接在任務(wù)欄圖標上浮動縮略圖完成一些任務(wù)（比如播放、停止網(wǎng)站上的視頻）。 可以看出，IE9在努力縮小網(wǎng)站和Windows應(yīng)用程序之間的差異， 讓網(wǎng)站成為Windows桌面的主角。
下圖顯示了我的win7任務(wù)欄的幾個pinned sites： cnn.com （第二個圖標）， CSDN博客（第三個圖標），和51CTO博客(第四個圖標)。
點擊CNN圖標打開pinned site，用戶可以看到窗口左上角明顯看到CNN的網(wǎng)站圖標，瀏覽器的“前進”、“后退”按鈕顏色變成了CNN網(wǎng)站的主色調(diào)-紅色。 由此讓用戶產(chǎn)生感覺是：我在用CNN.com ， 而不是在用IE瀏覽器。 網(wǎng)站是主角。
接下來回到Web開發(fā)者關(guān)心的問題： 如果用戶“釘”了你的網(wǎng)站，IE9如何決定在IE窗口左上角以及win7任務(wù)欄的圖標，以及如何決定“前進”、“后退”按鈕的顏色？ 作為站長，我能不能定制？
答案是：
IE9會使用你網(wǎng)站的Favicon作為IE窗口以及Win7任務(wù)欄的圖標。（如果不了解favicon，請參見百科：
http://baike.baidu.com/view/1237286.htm）。 如果favicon.ico 中有32x32 大小的圖標，IE9會使用該圖標。如果只有16x16大小， IE9會在周圍加一個白色邊框。 本文第一張圖中的CSDN博客和51CTO博客任務(wù)欄圖標就是加了白色邊框的，打開之后的的效果如下2圖，看上去不夠美觀，希望CSDN和51CTO的站長能修改一下 :)
從上圖可以看到 CSDN的前進/后退按鈕顏色是紅色；51CTO的按鈕是藍色的，和favicon的顏色很接近。 這是因為IE9根據(jù)favicon的主要顏色來決定前進/后退按鈕顏色。 主要顏色是由一種圖像模糊算法計算出來的，在多數(shù)情況下應(yīng)該都是正確的。 如果你希望自己定制這個顏色，可以在網(wǎng)站的代碼里面加入msapplication-navbutton-color名稱的meta標簽來實現(xiàn)。 以下示例代碼定義favicon并將前進/后退按鈕定制成紅色：
view plaincopy to clipboardprint?
<html>
<head>
...
<meta name="msapplication-navbutton-color" content="red"/>
<link rel="shortcut icon" href="./favicon.ico" />
....
</head>
...
<html>
<head>
...
<meta name="msapplication-navbutton-color" content="red"/>
<link rel="shortcut icon" href="./favicon.ico" />
....
</head>
...
注：顏色定義支持任何HTML顏色標識。
總結(jié)：為了讓你的網(wǎng)站更好支持IE9 pinned sites，請在網(wǎng)站上加入32x32 (甚至48x48)的favicon，并且加入msapplication-navbutton-color的meta標簽。
歡迎和我聯(lián)系交流IE9開發(fā)問題。我會在接下來的博文中介紹Pinned Sites的Jump List 和縮略圖開發(fā)。
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
