Just Sword Wang's Blog

iline主题的手持设备支持

写第一个wordpress主题,我用了约两天的时间,设计绘制PSD稿1天,前端代码1天,但那个主题我完全已经忘记是怎么回事了,显然已经成了豆腐渣工程。一个仅仅外观比较清爽的主题,没有任何额外的思考。于是,琢磨着各种各样的想法,就有了现在这个博客所使用的主题,名字叫iline,就是"爱线条"的意思。而这个主题从开始写到现在,悄然已经过去了半年了...

3个月时间构建结构,3个月时间构建功能,有空就改进一点点,慢慢打磨出来的自己的主题,不过离完成却仍然还有很长的路要走。

最近的变化是增加用jQuery的重写了隐藏侧边栏的动画、自适应宽度和固定960px宽度的转换,以及左上角menu功能的完善。里面增加了一个PPT Extra Mode用来将内容区的文本基准放大到正常尺寸的3倍,而这时POST的文本字号会变大到48px,而标题字号更是可以达到77px。

有什么用呢?这种文字缩放和浏览器支持的缩放并不相同。尽管写这个主题的时候就考虑完全要支持浏览器的缩放,但是使用级联创造的单纯的缩放字体的效果会更好。起初的目的是让我的网页能够用来演示PPT,为此文字需要在投影仪里足够大和清晰,配合菜单提供的功能,一个简单的PPT演示应该不难实现。只是没有想到的是,这种模式同样对手持设备提供更好的访问性。

iline theme in iphone

我测试了同事的Android,iPad以及iPhone,在48px字体显示效果下阅读起来都非常舒适,都不需要缩放,甚至在分辨率仅320x240的屏幕上效果仍然很好。只是这里要记录下一个关于iPhone上的safari的问题——关于-webkit-text-size-adjust这个属性。

iPhone的移动版safari是有点不同的,它会自动调整网页的内容,而其中的-webkit-text-size-adjust属性会被设置成none的默认值,这个值使得safari防止了字体大小的调节——很多时候这很有用,这样iPhone可以舒服地放大这个网页调节出合适的字体大小,但另一个方面也会造成麻烦,em的字体调节还是有着不可比拟的可访问性优势,瞬间放大所有字体,这个网页一下子变得更容易阅读,最重要的是没有多余的滚动条。所以,将这个值设置成100%后safari就不在阻止字体调整,这样调整em值就仍然有效,而且效果很赞:)

关于-webkit-text-size-adjust这个值,Safari Developer Library里有更为详细的参考,就不在这里冗叙。

未来手持设备的发展一定会颠覆一些传统的网页设计的教条。我的主题没有什么漂亮的元素,没有图的纯CSS主题——未来恐怕它也不会漂亮到那里去,但是我希望未来,它的可访问性,是出类拔萃的。

BGM @ Donna Burke - Heavens Divide -Instrumental- @ 神前暁 - あの日の記憶を追いかけて @ 中川翔子 - Ray of Light -Instrumental-


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。