背景

实验网站：奇团网Qeetuan.com

应朋友邀请，为Qeetuan.com制作了Opera的快速拨号快照。

如果你想看下效果，安装Opera11.10版本在quickdial面板上加一下http://qeetuan.com即可！

下面分享下本次制作quickdial的体验。

首先，参考官方文档 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/

过程

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

按步就班(详见上面的文档)，

1，在qeetuan.com网站根目录下建一个preview.html

2，在apache上做rewrite

3，定制preview.html的内容

opera11.10 quickdial的一些经验和遇到的问题

1，官网上推荐的quick dial内容的宽为260px，高度195。

但实际上quickdial面板的标题占用了大约28像素的高度！最终比较合适的推荐高度应该是155像素
 

2，对于使用view-mode:minimized控制quickdial内容的样式

官网上说可以使用外联css文件

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

但实际上如果使用外联css文件，对quickdial内容的渲染不起作用，就跟不指定media="(view-mode:minimized)" 一样！

所以如果使用view-mode:minimized进行css渲染，需要直接使用style标签写在页面内！

另外，使用X-Purpose的方式，preview.html里面不要有html的注释标签“<!---->”，否则quickdial渲染时可能会有问题！

3，preview.html要结合view-mode:minimized才能完美地实现效果

如果你使用preview.html，但是css样式没有指定view-mode:minimized，那么quickdial在获取preview.html的快照时会将它当成普通的html页面获取，就是说会缩放你的内容。

4，quickdial一个比较严重的bug，

当你将quickdial的刷新频率由never改成别的频率后，手工刷新一下quickdial的内容，

你会发现“整个quickdial的内容被缩放了N倍”！有图为证，有木有！有木有！

改之前，

改之后，=悲剧发生了。。。

作者: Mamboer 发表于 2011-03-26 17:35 原文链接