Going Mobile

还是接着上回的话题吧，感谢 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 能在这些设备上有好的浏览体验，多多指正，指出问题及解决方案最好。