試用Opera11.10 build2053 版本的speed dial功能

背景

實(shí)驗(yàn)網(wǎng)站：奇團(tuán)網(wǎng)Qeetuan.com

如果你想看下效果，安裝Opera11.10版本，在快速撥號(hào)（speed dial）面板上加一下http://qeetuan.com即可！新打開一個(gè)tab默認(rèn)顯示的東東就是傳說(shuō)中的快速撥號(hào)了～

下面分享下本次制作speed dial的體驗(yàn)。

首先，參考官方文檔 http://www.operachina.com/explore/2011/03/18/dont-like-screenshot-hi-site-owner-make-a-beautiful-picture-in-opera-speed-dial-for-your-site/

過(guò)程

我采用的是X-Purpose的方式。

按步就班(詳見(jiàn)上面的文檔)，

1，在qeetuan.com網(wǎng)站根目錄下建一個(gè)preview.html

2，在apache上做rewrite

3，定制preview.html的內(nèi)容

opera11.10 speed dial的一些經(jīng)驗(yàn)和遇到的問(wèn)題

1，官網(wǎng)上推薦的speed dial內(nèi)容的寬為260px，高度195。

但實(shí)際上speed dial面板的標(biāo)題占用了大約28像素的高度！最終比較合適的推薦高度應(yīng)該是155像素

2，對(duì)于使用view-mode:minimized控制speed dial內(nèi)容的樣式

官網(wǎng)上說(shuō)可以使用外聯(lián)css文件

<link rel=stylesheet type="text/css" href="minimizedstyles.css" 
　　media="(view-mode:minimized)">

但實(shí)際上如果使用外聯(lián)css文件，對(duì)speed dial內(nèi)容的渲染不起作用，就跟不指定media="(view-mode:minimized)" 一樣！

所以如果使用view-mode:minimized進(jìn)行css渲染，需要直接使用style標(biāo)簽寫在頁(yè)面內(nèi)！

另外，使用X-Purpose的方式，preview.html里面不要有html的注釋標(biāo)簽“”，否則speed dial渲染時(shí)可能會(huì)有問(wèn)題！

3，preview.html要結(jié)合view-mode:minimized才能完美地實(shí)現(xiàn)效果

如果你使用preview.html，但是css樣式?jīng)]有指定view-mode:minimized，那么speed dial在獲取preview.html的快照時(shí)會(huì)將它當(dāng)成普通的html頁(yè)面獲取，就是說(shuō)會(huì)縮放你的內(nèi)容。

4，speed dial一個(gè)比較嚴(yán)重的bug，

當(dāng)你將speed dial的刷新頻率由never改成別的頻率后，手工刷新一下speed dial的內(nèi)容，

你會(huì)發(fā)現(xiàn)“整個(gè)speed dial的內(nèi)容被縮放了N倍”！有圖為證，有木有！有木有！

改之前，