Raina

近期在研究一些多终端的东西，因为先接触了opera浏览器，所以就继续着之前的足迹，开始在operamini上进行了一些尝试，也发现了很多之前从来没有遇到过的东西，还有点好玩。也将自己最近的成果跟大家分享一下。

目前市场境况：

Opera Mini是一款挪威的Opera Software ASA制作的，是市场份额排名第二的移动端浏览器，作为世界上最流行的移动设备web浏览器，目前有超过大约两千万的用户。而且从opera mini打开的页面数量也可以看出，使用opera mini的用户数量也在不断的上升，下面的图例也可以反映出一些情况：

工作原理：

Opera mini浏览器之所以越来越受用户的青睐，他对于页面的解析也是一个方面，当用户通过opera mini对网页进行请求时，会将请求信息发送至服务器，经服务器处理成二进制后，最终反馈给用户，而这个过程极大的减少了带宽的使用。

在Opera Mini中页面可以使用handheld 样式表和CSS3中的 media queries来制作适合移动设备显示的样式，如果书写外联样式，可以采用如下写法：

<link rel=”stylesheet” href=”handheld.css” type=”text/css” media=”handheld” />

内联样式可以通过如下写法满足：

@media handheld and (max-device-width: 480px), screen and (max-device-width: 480px) { }

同时自己在研究过程中也制作了部分demo供大家查阅，主要是css中的一些属性在opera mini中的支持情况。

测试用例：

大家可以通过Opera Mini Simulator进行相关页面测试http://www.opera.com/mini/demo/

默认情况下，opera mini会下载screen模式的样式文件，所以大家可以通过下面的使其以mobile view模式展示，设置Opera Mini–>Tools–>Settings–>Web pages–>Mobile View为checked时，Opera Mini才会下载handheld样式表。

以下是operamini不兼容的css列表：

• 不支持line-height属性

测试demo：www.rainaxin.com/operamini/line_height.html

• 对于字体支持不是很好

测试demo：www.rainaxin.com/operamini/font_size.html

• 不支持多背景图

测试demo：www.rainaxin.com/operamini/multi_bg.html

• 列表样式，列表样式中circle样式会解析成效方块，讨论的结果是因为太小，以至于不能绘成circle，所以解析成小方块。

测试demo：www.rainaxin.com/operamini/list.html

• text-shadow不支持radius（Works in Safari, Opera, and Konqueror）

测试demo：www.rainaxin.com/operamini/text_shadow.html

以上是对一些属性进行了测试，而在实际工作中，如果是专门针对移动设备设计页面，不会设计这么负责，不仅仅是因为其多终端对于css的支持不像web浏览器那么好，还有一个比较重要的是，移动端浏览器对于js支持也不是很好，所以设计的复杂页面，即使视觉展示可以达标，但是很多功能确不能正常使用，所以写这些的目的只是为大家提供一些参考，也希望大家可以提出自己的见解，一起分享。

更新于2009-09-25:
StatCounter的移动浏览器统计数据：