这几天接到北京提出的iphone网站开发项目，看到视觉稿，也确实够晕的。仔细想想，需要使用到很多css3圆角和背景技术，从这点来说，玩玩css3，也确实不错。 上面列出的部分视觉稿中，按钮的样式、导航的渐变背景，以及带有icon前缀修饰的按钮，渐变背景和圆角都是用了css3的-khtml-border-radius，background:-webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#d8d8d9))。css3，玩起来还是不错的，在这里我不想讨论css3的使用技巧，只是想把在做的过程中遇到的一些问题，亮出来晒晒。 HTML的head标签内需要显示声明meta属性：<meta name=”viewport” content=”width=device-width; minimum-scale=1.0; maximum-scale=1″ />，minimum-scale和maximum-scale主要作用是控制内容的显示比例。 iphone在使用css3的时候，要通过-khtml为前缀的方式，-webkit的方式不管用。比如：-khtml-border-radius iphone不支持css的inline-block属性 iphone没有:hover状态，不过可以通过iphone的ontouchstart和ontouchend两个js事件来模拟触屏特效，比如上面展示了搜索结果展示的list和按钮样式变化的情形，我都是用js来实现的。不过这也有个不可避免的问题，就是iphone默认有这么个触屏效果，虽然可以在ontouchstart和ontouchend事件中通过return false可是实现，但是这取消了链接或者按钮默认的功能，这个需要衡量。(javascript示例代码如下） iphone在横屏和竖屏的情况下，字体会发生变化。这可以通过在html中用css的属性：-webkit-text-size-adjust:none;声明一下，就可以防止横竖屏切换的时候字体发生的变化，导致其他样式连锁变化。 iphone支持大多数的css3属性：我使用到的就有:last-child,:first-child,nth-child(n),:last-of-type,:first-of-type等等，通过只用这些css属性，可是节省很多麻烦。 … 了解更多