Going Mobile II

还是讨论mobile web design的话题,对之前的Going Mobile做些补充和修正。因为我的blog模板是完全用HTML5重写的,所有不支持HTML5以及CSS的移动设备浏览器全部忽略,我指的是此文只针对iPhone Safari,Google Android Chrome Lite以及Opera Mini/Mobile这些Modern Browsers。

善用@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)

Read More

Going Mobile

还是接着上回的话题吧,感谢leafduoLushnis两位很有手机品味的朋友的测试 :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
Read More

好玩的CSS3 Transitions属性

由于写论文的缘故最近经常要切到Windows下,顺便好好玩了下Google Chrome这款webkit engine浏览器,一个星期下来就有彻底投靠Google Chrome的冲动了,就等着Google Chrome的Linux版了。

webkit engine有个很nifty的CSS3私有属性-webkit-transition,有了它可以代替原来很多不得不依靠jQuery这些framework实现的动态效果。

关于这个属性的介绍就不多说了,直接上演示实例吧,用Inspector看下代码就一目了然了。

注:此演示实例只对webkit engine有效,请用最新的Google Chrome, Safari浏览器访问,Linux下可以使用Arora。

Mozilla Firefox 你何时才能解决下linux下的性能问题啊?
Microsoft IE 你何时才能跟上其他浏览器的步伐啊?
Opera 你何时才会出Opera Mobile for S60啊?

Tips in Aggregate

都是些很零碎的tips,涉及到linux, wordpress, css, php, English … 选择性阅读吧!

Douban and PHP

按照之前QQ签名秀的原理把豆瓣的个人广播系统也给提取出来了,效果请见此test页面

使用方法是把以下代码添加到你的页面里:

<script type="text/javascript" src="http://punkid.org/glade/douban/request.php?userid=<strong>username</strong>&numbers=5"></script>

其中userid后面跟的是你的豆瓣用户名,numbers后面是显示条目数(最多10条)。至于怎么polish这个douban的miniblog纯粹是你的CSS活。对了,输出编码是UTF-8。

PHP tips: 用addslashes这个函数可以对字符串进行转义。
Read More

April 5th is NOT for See Ass Ass

No CSSThe CSS Naked Day is coming back! What a CSS Naked Day is? In April 5th, the event participators’ sites will go completely NO STYLE but plain, removing all of the CSS.

Seems like quite interesting and alternative, i’d like to get NUDE with these crazy guys. The purpose is let you know how important and magical the CSS is for site decorating,as well the reason why we should write semantic codes.

Join us if you wanna save your bandwidth a little bit more. NO SEE ASS ASS (CSS) !

You Might Know

This site is powered by WordPress CMS & hosted by Dreamhustle Dreamhost.

And the theme is inspired by WP Typo and completely crafted under Gentoo Linux with VIM editor.

Sponsors

Monthly Archives

Search