Opera Mini 5 网站开发速记

前几天,Opera宣布其用户已经超过1亿——桌面版和手机版均超过5000万。Opera Mini是一个很优秀的手机浏览器,对手机用户而言,Opera Mini为锅牛般的手机互联网访问提供了更快更好的体验。而最近最让iPhone用户惊喜的是,Opera mini 5通过了水果店的审核,已经可以免费下载。现在Opera mini 5已经发布了对各平台的版本,包括Android/oPhone、Windows mobile、黑莓、Java等,支持绝大部分手机平台。

Opera Mini 5被称为Opera公司的“下一代”手机浏览器,可见它与Opera 10.5x一样,也是一个很重要的里程碑,那么今天就让我们看一看Opera Mini 5对移动网站开发的影响吧。

Opera Mini 5的特性

  1. Opera Mini 5使用Presto 2.4的引擎,渲染能力与Opera Mobile 10(只有Windows Mobile和S60版本)基本持平;
  2. 由于Opera的 Vega图形引擎无法在其代理服务器上使用,所以,一些CSS3属性不能在Opera Mini 5中应用,比如border-radius、css transition等;(事物都有两面性,Opera Mini速度快的关键就是其代理服务器提供了内容压缩,而在这里,却成为了技术的一个鸡肋)
  3. 支持CSS3媒体查询;
  4. 完全支持CSS3选择器;
  5. 支持多背景图片;
  6. 支持RGB(a)和HSL(a)色彩;
  7. HTML 5的一些特性无法支持,比如网络字体、表单等,经测试,Opera mini 5在html5test.com的测试中只拿到14分(共160分),只支持html5的doctype和部分canvas;
  8. 部分支持SVG,只会被渲染为光栅图片;
  9. 支持Data URi。

Opera Mini 5与Opera桌面版和Opera mobile 10对标准的支持对比表

Zi Bin, Cheah整理了一份Opera Mini与Opeta Mobile 10以及桌面版的Opera 10.50在网页标准支持方面的对比表。通过这个表格,我们可以详细的看到三个平台的Opera对标准的支持情况了。

桌面版 10.5xMobile 10Mini 5
[CSS3](http://www.opera.com/docs/specs/presto25/#css) 常规属性
网络字体![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
媒体查询(meidia query)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)
text-shadow (包括多重text-shadow)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)(不支持模糊半径)
选择器![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)
[CSS3 背景与边框](http://www.w3.org/TR/css3-background/)
border-radius![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
background-clip![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)
background-origin![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)
多背景图片![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)
background-attachment![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
box-shadow![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
border-image![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
[CSS3 Transitions](http://www.opera.com/docs/specs/presto25/css/transitions/)
transition-property![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
transition-duration![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
transition-delay![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
transition-timing-function![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
ease![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
linear![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
ease-in![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
ease-out![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
ease-in-out![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
[CSS3 2D 转换](http://www.opera.com/docs/specs/presto25/css/transforms/)
translate![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
translateX![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
translateY![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
scale![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
skew![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
rotate![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
transform-origin![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
[CSS3色彩](http://www.w3.org/TR/css3-color/)
rgba()![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)
hsla()![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)
[HTML5](http://www.opera.com/docs/specs/presto25/html5/)
Video![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
Audio![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
Web Forms![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/003848aiu.png)
存储
Web Storage – Local Storage![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
Web Storage – Session Storage![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
Web SQL Storage![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)
图形
Canvas![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png) (不支持文本)
SVG![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png) (简单支持)
杂项
Selectors API![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![支持](//www.qianduan.net/img/2010/04/163848h7u.png) 不支持某些事件,比如mouseover
Viewport元标签N/A![支持](//www.qianduan.net/img/2010/04/163848h7u.png)![不支持](//www.qianduan.net/img/2010/04/003848aiu.png)

Opera Mini 5的User Agent

Opera Mini 5的User Agent如下:

Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.18635/1030; U; en) Presto/2.4.15

总结

最近做了一些在Android/Ophone平台上的页面,本来以为Android的浏览器是基于webkit内核的,可以放心大胆的使用各种CSS3的属性。但是后来发现在某些细节上表现很不好,而且Android各个版本之间的兼容性问题的确是比较严重的。而对于使用最为广泛的Opera,目前来看基本上是实现了“跨平台”了。保持浏览器在各个平台上表现的一致性,无论对开发人员还是用户,都是非常重要的,目前来看,Opera在这方面是个好榜样。

当然没有人会专门做一个只兼容Opera Mini的网站,我最近将研究一些关于移动互联网开发的内容,欢迎关注。这个世界常常让人很痛苦,但是只要认真面对,痛苦总会有快乐相随。

参考文章