[IE9] 如何讓你的網站在IE9和Win7工作列上更閃亮

IE9引入了Pinned Sites 新概念。Pinned Sites允許使用者把網站像Windows應用程式一樣“釘”在Windows 7 工作列上。使用者可以直接點選工作列上的圖示打開網站，可以通過Jump list直接通路網站的各個功能，甚至可以直接在工作列圖示上浮動縮略圖完成一些任務（比如播放、停止網站上的視訊）。 可以看出，IE9在努力縮小網站和Windows應用程式之間的差異， 讓網站成為Windows桌面的主角。

下圖顯示了我的win7工作列的幾個pinned sites： cnn.com （第二個圖示）， CSDN部落格（第三個圖示），和51CTO部落格(第四個圖示)。

<a href="http://blog.51cto.com/attachment/201009/100607675.png" target="_blank"></a>

點選CNN圖示打開pinned site，使用者可以看到視窗左上角明顯看到CNN的網站圖示，浏覽器的“前進”、“後退”按鈕顔色變成了CNN網站的主色調-紅色。 由此讓使用者産生感覺是：我在用CNN.com ， 而不是在用IE浏覽器。  網站是主角。

<a href="http://blog.51cto.com/attachment/201009/100750261.png" target="_blank"></a>

接下來回到Web開發者關心的問題： 如果使用者“釘”了你的網站，IE9如何決定在IE視窗左上角以及win7工作列的圖示，以及如何決定“前進”、“後退”按鈕的顔色？ 作為站長，我能不能定制？

答案是：

<a href="http://blog.51cto.com/attachment/201009/100919912.png" target="_blank"></a>

<a href="http://blog.51cto.com/attachment/201009/101015161.png" target="_blank"></a>

從上圖可以看到 CSDN的前進/後退按鈕顔色是紅色；51CTO的按鈕是藍色的，和favicon的顔色很接近。 這是因為IE9根據favicon的主要顔色來決定前進/後退按鈕顔色。 主要顔色是由一種圖像模糊算法計算出來的，在多數情況下應該都是正确的。 如果你希望自己定制這個顔色，可以在網站的代碼裡面加入msapplication-navbutton-color名稱的meta标簽來實作。 以下示例代碼定義favicon并将前進/後退按鈕定制成紅色：

&lt;html&gt;    

&lt;head&gt;    

...     

&lt;meta name="msapplication-navbutton-color" content="red"/&gt;    

&lt;link rel="shortcut icon" href="./favicon.ico" /&gt;    

....     

&lt;/head&gt;    

...    

注：顔色定義支援任何HTML顔色辨別。

總結：為了讓你的網站更好支援IE9 pinned sites，請在網站上加入32x32 (甚至48x48)的favicon，并且加入msapplication-navbutton-color的meta标簽。

歡迎和我聯系交流IE9開發問題。我會在接下來的博文中介紹Pinned Sites的Jump List 和縮略圖開發。

 本文轉自 陳本峰 51CTO部落格，原文連結：http://blog.51cto.com/wingeek/392484，如需轉載請自行聯系原作者