Mobile Web下的编码设计（4）

只提供一个网站(One Web)

进行到这里时，就开始变得有趣了。你可以再次依靠服务端功能检测，但这次是在单一网站的基础上进行优化，而不是重定向到另一个独立网站。有一些手机所支持功能的数据库可以参考，例如WURFL。它是以XML文件的形式开放的，你可以在设计优化内容之前，先通过它来查询设备所支持的功能。你还可以查询移动设备的UA字符串，找出这些设备的其他细节参数，例如是否有摄像头，屏幕尺寸是多少，以及它的语言种类等信息。

在客户端，你已经得到了为移动设备而优化内容所需的两个条件 – 媒体类型（media types）和媒体查询（media queries）。

媒体类型(media types)

就像你知道的那样，你可以指定不同的CSS来实现不同的用途，例如：

<link href="main.css" type="text/css" media="screen" rel="stylesheet"><link href="print.css" type="text/css" media="print" rel="stylesheet"><link href="mobile.css" type="text/css" media="handheld" rel="stylesheet">

手持类的媒体类型允许你针对移动设备使用优化版的样式（例如精简的布局和排版等）。这是一个被支持得很好的机制，实现起来也很简单，但它确实有它的缺陷。就像之前所说，它经常被开发者滥用，来给网站提供一个蹩脚的最低标准布局。事实上，OperaMini最近改变了默认类型，把默认使用手持型样式表（handheld stylesheet）改为屏幕型样式表（screen stylesheet）。OperaMini可以处理大多数完整网站，因此它并不真正需要使用手持型样式表（handheld stylesheet）。如果你乐意，你可以在OperaMini的浏览器选项中手动设置回移动视图。

媒体查询(media queries)

媒体查询是CSS3的一个构想，它的用途跟条件注释非常相似 – 你可以把一大堆CSS规则封装嵌入到一个媒体查询中，然后把它应用到你的标记结构中，这一切取决于一个条件，类似“屏幕尺寸是否小于480px？”然后把代码放进去，代码类似这样：

img {  margin: 0 0 10px 10px;  float: right;}@media all and (max-width: 480px) {  img {    margin: 10px auto;    float: none;    display: block;  }}

你甚至可以使用多个媒体查询，像下面这样：

body {  max-width:800px;  font-family:georgia, serif;}img {  margin:0 0 10px 10px;  float:right;}.info {  position:absolute;  left:8000px;}@media all and (max-width: 480px) {  img {    margin:10px auto;    float:none;    display:block;  }}@media all and (max-width: 240px) {  img {    display:none;  }  .info {    position:static;  }}

OK，在这个例子中（源代码点击这里查看），浏览器中的图片在屏幕大于480px时会向右浮动，文本会环绕图片并通过外边距留出一点儿舒服的距离（另有一个信息隐藏在 p 元素中，并命名了一个 class 叫 info - 看看HTML代码）。文本流在一些小屏幕中看起来可能会有些蹩脚，因为那里没有足够的空间来让图片和定量的文本放置在同一行中，所以当屏幕小于480px时，图片就需要改变一下，让文本不再围绕在它旁边，而是用 display:block 让它们显示在不同行中。等等 – 还有更精彩的！如果屏幕非常小以至于不能有效地展示图片，那就让它们消失，然后让隐藏信息显示在图片那儿，替代那些图片显示文本描述 – 这是一种将信息传达给读者的一种另类技巧，利用它也可以为那些使用屏幕阅读器的盲人用户提供原始文本，以便他们顺利浏览网站。图1展示了三个不同的浏览视图，这是在那些支持媒体查询的浏览器中（例如Opera 9.5）表现出的不同形式。

图1：例子中三个不同的浏览模式

听起来挺好，但是有没有不足呢？好吧，目前浏览器对媒体查询的支持程度非常有限。Opera浏览器支持它们，Safari 3也可以（以及其它基于Webkit内核的现代浏览器），但是Firefox 3之前的版本并不支持，IE或其他浏览器也不支持。解决问题的方法之一，是使用媒体类型和媒体查询的组合。这种方法在我的这篇文章中做过解释。这是一种变通方案，但肯定不够理想。这点在将来应该会有所改善。

摘要总结

目前就是如此而已。我希望我的移动开发世界之旅会对各位有所帮助。我在这只是抛砖引玉，要想深入学习的话，可以查看下面这些资源。

资源

• Mobile web design book, by Cameron Moll

• Designing and developing mobile web sites in the real world — 一个实例研究 by Brian Suda

• Server-side capability detection for mobile devices by Brian Suda (包含WURFL, UA字符串等信息)

• Ajax/JavaScript support in Opera Mini 4, by me

• Kristian von Streng H&Atilde;&brvbar;hre’s Opera Mini request header reference

• How to serve the right content to mobile browsers, 同样by牛B的me — 包含媒体类型和媒体查询

• Creating safe media queries that work cross browser

• Web design with Opera Mobile in mind, 再一次 by me

• The WURFL homepage

• The Opera Mobile homepage

• The Opera Mini homepage

原文：http://carsonified.com/blog/features/css/coding-for-the-mobile-web/

中文：http://www.smbey0nd.com/2010/01/17/coding_for_the_mobile_web/