既然MPD是纯粹的C/S理念，为MPD找个手机client端也应该不难。于是找到了Remuco这款软件，它能够通过蓝牙或者Wifi的方式遥控Linux下的大部分媒体播放器，包括Amarok, Audacious, Banshee, Exaile, MPD, MPlayer, Rhythmbox, Songbird, Totem, TVtime, VLC和XMMS2。而且由于本身基于java，理论上支持java且有蓝牙或者Wifi设备的手机都能安装并使用它，从它的List of client devices successfully used with Remuco上看，实验成功的手机还是蛮多的。我在我的诺记非阉割版的E71上也成功实现了，下面是我在Gentoo Linux和E71上的实现过程：

（P.S: 这绝对是我最后一台诺记，别在BS我们这种没文化的弱鸡鸭用户了。我们都知道，有钱有文化的才用iPhone，Android手机。）

首先是保证你装了MPD，并且能够顺利运行，MPD默认使用的端口是6600，没有特殊需求的话，最好还是不要改。

然后是去Remuco的Googlecode上下载源码包。源码包包含两个部分，一个是主机上的server实现，另一个是手机用的客户端。一般来说我们都可以找到已经编译好的Remuco二进制包，在Gentoo下Sunrise overlay里也有ebuild，或者直接下载ebuild文件放到自己的本地overlay里吧，最近的版本是remuco-0.9.3-r2.ebuild。

因为我只需要开启remuco对MPD的支持，所以我只启用了mpd一个USE:

# echo "net-wireless/remuco mpd" >> /etc/portage/package.use
# emerge remuco

然后运行remuco-mpd, 如果你发现运行失败的话（请查看~/.cache/remuco/mpd.log），很有可能是和我一样，主机没有蓝牙设备，我们要做的是关闭remuco-mpd的蓝牙支持。找到~/.config/remuco/remuco.cfg文件，将如下一句键值替换:

[DEFAULT]
bluetooth-enabled = 0 #把1改为0
...

重新运行remuco-mpd，如果~/.cache/remuco/mpd.log里有提示: [ manager.py ... ] player adapter started则表示成功运行。

接下来是手机客户端，解压缩的源码包有个client/midp/app目录下有个remuco.jad和remuco.jar安装文件，不需要BT的话就安装no-bluetooth子目录下的安装包吧。

运行手机上的Remuco客户端，一般来说设置Host or IP项就行了，我通过路由器已经绑定了主机的固定IP为192.168.1.100，默认wifi的连接端口是34271，启用了iptables的话还得对端口放行，因为我同样固定了手机的IP为192.168.1.101，所以之前就通过iptables对来自手机的全部访问都放行了。

# iptables -A INPUT -s 192.168.1.101 -j ACCEPT

没什么问题的话，手机就能顺利控制MPD啦，这是主机上运行的ncmpcpp，显示正在播放Mono的Follow the Map。

来看下手机端的显示，同样是Mono的Follow the Map。

还可以用手机查看播放列表及MPD上的音乐库，并通过手机进行遥控操作。

另外，录制了一小段演示视频，视频内演示了通过手机快捷键n/p实现歌曲的切换，以及添加歌曲到播放列表，整个操作都是手机端和主机同步的。拍的有点抖，实在不是当AV男的料啊 -_-|||（注：此视频基于HTML5的video技术，采用开源的ogv格式，只支持h.264的Safari…忽略你！）

软文就此打住，我这篇文章的内容是解剖Google Buzz移动版的CSS应用。由于时间有限，加上Google复杂的页面代码压缩以及毫无规律的DOM class/id命名，很多东西难免有疏忽和纰漏，望斧正。

注: 以下测试及截图均来自桌面版的Mozilla Firefox和Google Chrome。（对Mozilla Firefox下的显示稍微做了点CSS Hack [via Stylish]）

首先来看Google Buzz移动版的完整截图，很标准的iPhone UI设计。

使用data URI scheme减少HTTP Request

众所周知，过多的HTTP Request对页面的载入速度有极大的负面作用。为了尽量减少CSS中图片载入的HTTP Request，出现了CSS Sprites技术。而data URI scheme则直接将文件用base64编码方式译为字符串，直接以inline形式嵌入到HTML/CSS文本中，计算机在获取HTML/CSS后，将base64过的字符串进行解码，生成原文件，而不是以传统的地址获取方式再发送一次HTTP Request来得到原始文件，相应的就减少了一次HTTP Request。不过这样做的坏处是，base64转译过的一大串字符串不利于HTML/CSS维护，代码的可读性也大大降低。

Google Buzz Mobile的UI图片几乎全部使用了data URI scheme技术，整个页面的HTTP Request大大减少。至于代码的维护…如同那些杂乱无章的class/id一样，只有Google的工程师才看得懂的天书。

该不该全面使用data URI scheme ?

为了减少访问数据下载量，我对blog启用了gzip压缩，包括javascript，css甚至@font-face里用到的字体也可以压缩（via Gzip your @font-face files）。启用gzip的压缩结果是客观的，一个Graublau Web.otf字体从41.464k压缩到了31.528k，压缩率为76.04%。然而用上data URI scheme，即使对CSS开启gzip压缩，由于经过base64转译后字符串本身大大增加了CSS文件的体积，压缩效果大大折扣。

再者，由于@font-face里用到的字体不会被修改，还可以启用cache来阻止下次访问重新下载，而HTML/CSS则是经常会被修改的，开启了cache也会经常要重新下载更新。

所以，什么时候使用data URI scheme呢？像jpg，png这些图片本身的压缩率就几乎到极限了，即使再gzip也是事倍功半。Data URI scheme配合CSS Sprites技术来定义CSS里简单的背景图片是个不错的选择，至于那些体积较大，图形比较复杂的图片（例如摄影照片）还是直接定义backgroud:url(…/filename.jpg)吧。

P.S: 分享下我使用的gzip及缓存优化代码，把以下代码添加到.htaccess文件里。

<ifmodule mod_deflate.c>
Addtype font/opentype .otf
Addtype font/truetype .ttf
Addtype text/javascript .js
AddOutputFilterByType DEFLATE text/css font/opentype font/truetype text/javascript application/javascript application/x-javascript
</ifmodule>

ExpiresActive On
ExpiresByType font/opentype "access plus 2 years"
ExpiresByType font/truetype "access plus 2 years"
ExpiresByType text/css "modification plus 1 month"
ExpiresByType text/javascript "modification plus 1 month"

使用border-image定义背景图片

为了适应各类屏幕尺寸的掌上设备，Google Buzz里的UI控件没有简单地使用固定尺寸的图片来定义背景，也没有通过层层div来定义每个边角。因为CSS3已经带来了border-image属性！

如图所示，Google Buzz Mobile顶端的一排按钮以及下面的输入栏（蓝色框显示）仅仅用了三张简单的小图片（红色框显示）即实现了整个UI设计。

以图片中Following按钮为例，简要说下border-image的使用。

border-image实际上是将一张图片切割为9宫格，用以分别显示一个元素的topleft, top, topright, right, bottomright, bottom, bottomleft, left和center九个区域，其中top, right, bottom, left以及center区域在无法填满元素时会默认进行图片水平/垂直重复。例如这个Following按钮的CSS代码为:

.FtX31c {
    -webkit-border-image: url(data:image/png;base64,...) 4 1 5 4 stretch stretch;
    border-width: 4px 1px 5px 4px;
    ...
}

除了前面说到的应用了data URI scheme，-webkit-border-image中的4 1 5 4分别代表了从上，右，下，左顺时针方向切割图片的像素值，其中top切块的像素值为4px，right切块为1px，bottom切块为5px，left切块为4px。这与下面的border-width是相对应的。而stretch则是自动水平/垂直拉伸以填满元素区域，但不进行图片重复。

另外，目前Gecko, Presto, Webkit三大引擎都支持border-image了。

利用text-overflow隐藏文字

Text-overflow是CSS3中新加入的一个属性，用来控制溢出盒模型的文字显示方式。在Google Buzz Mobile中Google使用了text-overflow: ellipsis属性来控制文字的显示方式，溢出盒模型的文字将会自动以…代替显示。

如下图，支持text-overflow: ellipsis属性的溢出文字自动压缩为…，而在不支持text-overflow: ellipsis的Firefox下测试，单词只显示了一半。

End

如果你跟我一样，用Mozilla Firefox访问Google Buzz Mobile的话，可以使用我修改过的CSS代码，添加到Stylish插件里。

点击下载: Google Buzz Userstyles

善用@Media规则

Opera Mini/Mobile, Chrome Lite, iPhone Safari都支持@media规则，所以下面这行代码基本上就能搞定这些主流的移动设备浏览器了。

@import url(css/handheld.css) only screen and (max-device-width:480px)

如果你希望为iPhone Safari/Chrome Lite添加独立的样式表的话，加上-webkit prefix就可以了。

@import url(css/handheld_iphone.css) only screen and (-webkit-max-device-width:480px)

Viewport的重要性

由于Opera Mobile的默认screen width是850px，而iPhone Safari则是980px。如果你跟我一样，不设定body的宽度，而是让它自适应屏幕宽度的话，你会发现在移动浏览器上你的网页宽度可能远远超过了480px。添加viewport的META到HTML head里能有效避免这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

通过width=device-width将网页默认宽度设置为设备屏幕尺寸。

Float and Fixed Positioning

float能不用尽量不用，但不等于说float就不能用，至少iPhone Safari，Chrome Lite以及Opera Mini/Mobile对浮动的处理都是很准确的。

真正需要避免的是fixed定位，一是浪费了原本就不大的屏幕空间，二是滚动页面时容易导致花屏。

使用Max-Width

如果你的图片动辄500px的宽度，在移动设备的浏览器上显示肯定会溢出屏幕，最好的办法是给img加上max-width属性:

img {max-width:100%; height:auto;}

充分利用好HTML5 input

HTML5为input加入了很多激动人心的新属性，包括新的type，placeholder以及autofocus。

新的Input类别

新加入的input type包括email, url, search…使用这些type准确定义你的输入框，不仅让代码更语义化，而且在iPhone Safari上也能获得更大的输入便捷。

例如，如果你的input定义为email type:

<input type="email">

在iPhone Safari上点击输入框，弹出的虚拟键盘是这样的:

图片来自Dive into HTML5: A Form of Madness

最下面的一排按钮包括了email地址常用的@, .符号。

而如果你的input定义为url type的话:

<input type="url">

在iPhone Safari上弹出的虚拟键盘则自动包括了常用的.，/，.com符号。

图片来自Dive into HTML5: A Form of Madness

长摁.com的话还能在com, org, net中切换，不得不赞叹Apple的工程师对iPhone的细节把握，可惜的是Google Android就没这么聪明了。

Placeholder属性

placeholder这个新加入的属性可以在input中加入提示性文字，当点击input时该提示性文字则自动隐藏。以往这样的功能是需要依赖于javascript才能实现的。

如上图，加入以下代码，在输入框内会出现(Required, will not be published)的提示性文字。

<input type="email" id="email" value="" placeholder="(Required, will not be published)" required />

经测试，iPhone Safari和Chrome Lite都支持该属性。

Autofocus

另一个新增加的input是autofocus，目的是在页面加载完后自动聚焦到指定输入框内，这个效果经常在网页账号登陆页面上使用，例如Gmail, WordPress的登陆页面等等。同样，iPhone Safari，Chrome Lite以及Opera Mobile都支持它。

<input id="login" autofocus>

No Font-Face

font-face虽然在iPhone Safari，Chrome Lite以及Opera Mobile下都支持，但是以我的blog为例，即使开启了gzip压缩，一个Graublau Web字体还是有38kb。最好还是为移动样式表重新定义下font-family，去掉自定义字体。

首先，软件哪里下载自己看着办吧，反正理论上它不是免费的 :)

设置好了电脑的简单文件共享之后，一定要在路由上给电脑绑定一个固定IP，以方便连接操作。

这是进入symSMB的初始界面。

在My Phone里你会看到手机储存和映射到手机上的网络共享。图中Downloads和EasyMule均为电脑上设置的共享文件夹。

在Control Panel里首先设置下Account，添加一个用户名，用户名和密码是你所访问的电脑使用的用户名。

然后在Network Drives点New添加映射，对应的是你电脑的共享文件夹。

添加新映射的基本设置为：Name可以随便填，Drive只要没被占用的都可以用，Access point设置为常用的那个Wifi连接，Account自然是之前设置好的用户名，Host是所访问共享主机的IP地址，既然是局域网共享，IP自然是内网的了，Share很关键，填的是共享文件夹的名字，不能错。

添加好后你会发现My Phone里已新增你添加的Drive，这样你就能看到你共享的文件夹了。而且进行文件传输，文件预览(Mp3)等等都很方便了。

恩，晚上拿手机看The Big Bang Theory去!

早上7:30起床，我会先用手机浏览下我的Google Reader和Gmail，Google的产品在狭小的手机屏幕上都能保持良好的可读性和可访问性。特别是Gmail，脱离了beta之后，即使不用Gmail for S60客户端，直接网页浏览也完全没有问题，Contacts的可访问性比起以前大大提高了。

在去上班的地铁，公交上，我会用手机阅读下FTChinese, NY Times, CnBeta，这三个资讯类网站都有专门针对手机用户的移动版本。FTChinese是我目前最喜欢看的财经评论网站，里面的评论分析都很客观中立；NY Times不用说了，看看全球大事的；CnBeta主要是科技类新闻，可惜的是移动版看不到网友评论 :)

我的工作基本上都是出去和人打交道，经常要留下对方的电话号码，所以用Google Sync同步到我的Gmail Contacts很重要，以防手机丢失带来的极大不便。当然，真正要take notes的时候我还是老老实实地掏出我的Pilot G2手写吧，毕竟本子上记录的翻阅起来比较方便。在此强烈推荐大家使用Pilot G2的中性笔，书写起来和市面上那种一两块钱的就是不一样，而且价格也不算贵，10来钱一支吧。当然，有钱的爷您大可选择LAMY之类的，上次朋友过生日我送了支LAMY，大出血啊…

出门在外跑肯定离不开地图，Google Maps很好用，无论是定位还是线路搜索。那天我给我一用E63的同事介绍Google Maps，他装了之后大呼太好用了，有点火星啊…实在没有网络的话，我用Nokia Map直接GPS定位也行。

上午10点到10点半，是股市行情的一个高峰和判断点，所以我得掏出手机，打开公司自主研发的手机软件（未避免广告嫌疑，名字就不说了）查看下行情。有时碰到客户，也可以拿出来给他看下当天的行情信息。

中午吃完饭了，没事就上上popurls这个新闻聚合类网站，主要阅读下今天有啥digg, delicious火爆信息就是了，打发时间来着。

闲着的话就顺便用fring上上MSN, Gtalkr，所以你看到我MSN, Gtalkr在线多半是手机在线。

当然，如果碰到附近有开放的wifi hotspot，我是坚决不会错过蹭网的，甚至成为了一种wardriving习惯。每到一个地方就有手机拿出来找找附近的热点，常去的话就把这个热点记录下来，方便以后蹭网。

我的建行账户开通了手机银行，月末的话可以靠这个核对下公司有没有岢扣咱血汗钱。

Wordmobi是我进行blog管理的手机方式，平时拿来审核评论，回复留言都挺方便的，日志编辑方面还有待完善。当然，因为我已经针对移动设备浏览器做了tuning，所以开Opera Mini直接访问我的blog也没啥问题。最大的问题还是wordpress糟糕的后台，accessibility极差无比!

晚上的话，我会再查看下Gmail，因为我已经把Yahoo!和Hotmail的邮件统一由Gmail收发，所以Gmail rules everything! 然后上上豆瓣吧，令我惊喜的是，豆瓣这么个大工程的web 2.0网站即使没有移动版本，可访问性也是相当的好，豆瓣的工程师太赞了!

另外，小小抱怨一句，不知是各大论坛装的Discuz!版本太低还是别的，正常网页版用我的Opera Mini浏览起来很痛苦啊，登录WAP版的又没法下载附件。

分享下你的nomad生活吧!

为什么做这个测试呢？我自己现在绝大部分时间都是在用手机上网，所以自然而然对我的blog进行mobile化改造很必要了。我的Nokia E71上用的是Opera Mini浏览器，它有两个优点，一是对标准（HTML5, CSS）的支持，二是页面经Opera服务器中转压缩处理，省流量。Nokia S60自带的基于webkit的浏览器我也试过，但是既不能解读handheld也不能处理高级点的Media Queries，所以基本上如果单纯从CSS, HTML下手，没法把它从众多桌面浏览器中区分开来，为它设立一个格外的mobile stylesheet。iPhone Safari我也把玩过几次，它对页面的渲染相当好，几乎不需要我格外去设立一个stylesheet了。其他的掌上设备浏览器还包括Android Chrome Lite，Netfront，UCweb等，我都没测试过。

针对各主流手机浏览器设立独立的样式表

因为目前主流的手机屏幕宽度像素都在320px以内，为了让我更好的用E71浏览我自己的blog，我为320宽度屏幕设立了一个独立的样式，把整个容器的宽度都调整到320px，字号也调小到相对大小1.3em。

@import url(css/handheld_320.css.php) handheld;
@import url(css/handheld_320.css.php) only screen and (max-device-width:470px);

前面一行是为了target那些支持handheld Media的手机浏览器，后者因为Opera，Safari和Chrome都支持高级的Media Queries，我把最大允许设备屏幕宽度设为470px，这样就能保证在用iPhone/iTouch, HTC G1/G2/Hero以及Nokia的Opera Mini上都能启用handheld_320.css样式表，不用进行水平滚动了。

现在，iPhone， HTC Android，M8都支持横屏模式了，以iPhone为例，横屏时浏览器的窗口宽度是480px，启用handheld_320.css的话未免太浪费水平空间了。所以有必要再对这类横屏模式启用另一个基于480px宽度的stylesheet，我于是再编写了一个handheld_480.css的CSS。

在一个理想的世界中，如果iPhone Safari，Android Chrome Lite这些浏览器支持更进阶的Media Queries的话，直接使用:

@import url(css/handheld_480.css.php) only screen and (max-device-width:480px) and (orientation:landscape);

就能保证iPhone Safari，Android Chrome Lite直接启用handheld_480.css了，然而现实是这两款浏览器都不支持orientation，Opera也不例外。所以我只能采取笨一点的方式，将480px宽度的设备默认为iPhone, Android, M8的横屏模式。所以target他们的代码妥协为:

@import url(css/handheld_480.css.php) only screen and (device-width:480px);

注意，如果同时引入了针对320px和480px宽度的mobile样式的话，针对320px设备的max-device-width一定要小于480px，否则对于iPhone, Android, M8这类横屏设备，handheld_320.css, handheld_480.css会同时启用。

不幸的是，这招在iPhone Safari和M8 Opera上都无效，Android上尚未实验。按理说iPhone Safari和Android Chrome Lite是支持device-width media query的，为何不起作用，不解ing…

另外，由于iPhone Safari会默认启用自动缩放功能，以保证整个页面在可视域范围内。既然我们已经有了handheld_320.css和handheld_480.css样式表，就没必要让它自动缩放了。在<head>里加入这一句HTML代码:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

这样iPhone Safari的初始化缩放为1（即不缩放），允许的最大缩放倍数为2。

关于移动样式表的一些CSS Tips

调整好字号，字体，我的blog默认启用的是1.6em的大号字体，在小屏幕上看实在有点挥霍空间了，有必要调小几号，我一直都是em字号方式的拥护者，为什么？见Effective Style with em。

页面一定要留白，虽然屏幕有320px，480px的宽度，实际上我能用到的可能就300px，460px，为了更好的阅读，页面上下左右各补白10px是有必要的。我直接在父容器wrapper里定义:#wrapper {padding:10px;}就是了。

减少不必要的空白，桌面浏览可以大胆的增加whitespace，这样看起来更舒适，但是移动设备不一样，过多的使用翻页，滚动条会加速手机的磨损，所以我在做mobile样式处理时，尽量减少过多的空白。

注意浮动和右对齐，float这个属性一定要注意，特别容易在小屏幕上发生溢出现象，所以能不用float就尽量不用，用的话也得算好容器宽度够不够用，text-align:right更得注意了，在320px以及更小的屏幕上，为了看到水平居右的文字还得拖动水平滚动条是件多么费功夫的事。我在handheld_320.css中几乎把所有右对齐的文字都调整为左对齐了。当然，handheld_480.css我没这么干，大屏幕不用怕 :D

注意不要溢出父容器的box-model，我在桌面样式上使用了负的margin把文章小标题移到文章一侧，形成marginal aside的样式。

.entry h4 {float:left;width:200px;margin-left:-200px;}

但是移动样式上，我回归到常规的标题模式：

.entry h4 {float:none;margin-left:0;width:100%;}

清除浮动和margin，宽度重新设置为100%，这样就不会出现水平滚动条拉动的现象了。

减少不必要的图片和节点，手机流量费贵啊，3G更贵，除非有wifi，不然sina, pconline这种我从不用手机浏览。所以，没必要的背景图片，修饰图标尽量都给去掉，至于jQuery这类花哨的特效，ajax技术，至少我的Opera Mini用不了，加载了也白费，浪费流量。

Accessibility是个很大的问题，你用电脑能点的到的我用手机未必点击的到，所以保持代码的语义化，精简化，标准化很重要，多拿手机测试下就知道哪有问题了。

End

最后，欢迎各位多用你们的爱机浏览我的blog，iPhone/Android/Palm Pre这类设备咱没钱买，没法完完全全保证我的blog能在这些设备上有好的浏览体验，多多指正，指出问题及解决方案最好。

都09年了，赶紧上移动设备，用mobile技术驱动你的网站吧（如果你也希望我多浏览浏览你的网站的话）。