还是接着上回的话题吧，感谢leafduo和Lushnis两位很有手机品味的朋友的测试 :D
为什么做这个测试呢？我自己现在绝大部分时间都是在用手机上网，所以自然而然对我的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技术驱动你的网站吧（如果你也希望我多浏览浏览你的网站的话）。
No Responses So Far