Cheshirecat

对于针对不同的终端设备显示不同的样式,CSS提供了一个简单的方法就是设置Media Types,CSS 2.1规范根据不同设备(device)划分为以下十种值:语音设备的”aural”,布莱叶盲文识读设备的”braille”,布莱叶盲文打印设备的”embossed”,小屏幕或者手持设备的”handheld”,常规打印设备的”print”,设计展示(如幻灯片设备)的”projection”,电脑屏幕的”screen”,电传打字机的”tty”,电视设备的”tv”以及针对所有设备的”all”.通常情况下我们使用到的是screen,print,all.但从CSS3草案中的Media Queries中我们可以看出一些趋势.如width,device-width的设定对于屏幕尺寸受到限制的手持设备的意义.

针对样式表置入方式不同,也有不同的使用方法.

使用链接方式的,可以设置media属性的值:

<link rel="stylesheet" media="screen" href="screen.css" type="text/css">

使用导入方法的,可以使用下面的方法:

@import url(screen.css) screen;

使用置入页面style标签中的以及使用链接或导入方式而将media属性设置为all的,可以在规则代码中这样设置:

@media screen {};

最近写CSS时特别针对Handheld Media Type设置了一下,自己测试了几款移动浏览器,包括Pocket Internet Explorer 7,Opera Mobile 8.65,Opera Mini 4,还有Mozilla的Minimo 0.2对Media Types设置的处理都有所不同.HtmlDog曾经提供过一个测试页面检测浏览器对screen和handheld Media Type设置的处理方式.链接:http://htmldog.com/test/handheld.html

Opera开发社区也提供了一个测试包,包含Media Queries的测试,下载地址:code_storey_operamini4.zip

对于CSS Queries的支持程度还有其他一些比较详细的信息可以在这篇文章中了解到,文章里面浏览器分析部分译文.

Opera Mobile

对CSS有相当高的支持度;
能够识别handheld,但是你不能将handheld混合在声明为all规则中;
支持Media Queries;
对没有设置Media Type为handheld的页面,默认识别为screen,不过页面会被重新格式化以适应屏幕显示,实际上只有一小部分的样式被应用;
用户可以设置某些选项以禁用重新格式化功能,取而代之的是使用和桌面浏览器版本相同的方式进行渲染;
在高分辨率的设备上不会以handheld样式现实,但是仍然会受限于Media Queries的设置;
可以被识别为手持设备浏览器.

Opera Mini

主要运行在小屏幕和低性能的手持设备中;
安装高性能设备中的Opera Mini 4高度支持CSS;
能够识别handheld,但是你不能将handheld混合在声明为all规则中;
支持Media Queries;
对没有设置Media Type为handheld的页面,默认识别为screen;
对于高性能设备上的Opera Mini 4,完全体会不到利用鼠标操作桌面版本的快感,文本被折叠起来以适应屏幕尺寸;
无论是在低于Opera Mini 3的版本中,或是高端以及低端设备中的Opera Mini 4,设置某些选项后,页面会被重新格式化以适应屏幕显示;
可以被识别为手持设备浏览器.

NetFront/Blazer

对CSS的支持不够好;
默认识别为screen,忽略Media Types设置,页面会被重新格式化以适应屏幕显示;
某些特殊版本只识别为handheld,如果你没有设置handheld样式,页面会以无样式显示;
@media实现不完全,经常会无视Media Types而出现错误的应用;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
会被识别为桌面浏览器.

Pocket Internet Explorer

对CSS支持差;
同时以screen和handheld样式显示,页面会被重新格式化以适应屏幕显示,只有相当少的样式会被应用到页面;
支持设置media属性的方法,但不支持@media和@import方法;
某些时候支持@media方法,但是并不可靠,大部分页面仍然不会正常显示,如果使用Media Queries,样式内容可能被忽略;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
可以被识别为手持设备浏览器,你可以使用CSS覆盖(重载)的方法使用handheld样式覆盖screen样式.

Series 60 Browser and Safari on iPhone

基于Safari engine,因此对CSS有相当高的支持度;
会被识别的screen,忽略Media Types设置;
某些更新版本支持Media Queries;
会被识别为桌面浏览器.

Minimo

基于Gecko引擎,对CSS有相当高的支持度;
默认识别为screen,忽略Media Types设置,页面会被重新格式化以适应屏幕显示;
用户可以自定义是否对页面进行重新格式化,页面可以与桌面浏览器版本相同的渲染方式进行显示;
会被识别为桌面浏览器.

由于Opera Mini并不是采用直连服务器的方式,而是在Opera的代理服务器(Opera Mini Server)对所访问的网页进行转化压缩后才显示在屏幕上,所以它的特征显得比Opera Mobile要特殊一些,要详细了解可以看一下Opera在开发社区的这篇文章.