iPhone网站开发点滴

核心提示：iphone在横屏和竖屏的情况下，字体会发生变化，iPhone网站开发点滴(2)，这可以通过在html中用css的属性：-webkit-text-size- adjust:none;声明一下，就可以防止横竖屏切换的时候字体发生的变化，可是再想想，可以利用background的repeat来实现背景的扩展，导致其他样式连

iphone在横屏和竖屏的情况下，字体会发生变化。这可以通过在html中用css的属性：-webkit-text-size- adjust:none;声明一下，就可以防止横竖屏切换的时候字体发生的变化，导致其他样式连锁变化。

iphone支持大多数的css3属性：我使用到的就有:last-child,:first-child,nth- child(n),:last-of-type,:first-of-type等等，通过只用这些css属性，可是节省很多麻烦。

iphone 同时也好支持几个class类做判断的功能，比如：

，编写这样的css规则用于判断div是有两个class 类：.test1.test2{background:#f00;}。只有div的class中同时包含了test1和test2这两个类，上面的css 规则才生效。

var addListener=function(el,type,fn){

el.addEventListener(type,fn,false);

}

var $=function(id){

return document.getElementById(id);

}

addListener($("nav-next"),"touchstart",function(e){

this.className=this.className+" nav-next-touch";

});

addListener($("nav-next"),"touchend",function(e){

this.className=this.className.replace(" nav-next-touch","");

});

通过这次iphone wap网站的开发，感受也是颇深的。css3、html5能极大的简化我们前端目前所做的工作。

附录：

在wap网站某个页面中，需要设计一个星级的样式，示例图如下所示：

起初是想这样设计的：把红色和白色的五个星一起截下来，使用两个span标签(或者其他行内标签也成)，外面的span使用五个白色的标签做背景，里面的 span使用红色的五个星做背景，之后根据需要来设定里面的span的宽度。

可是再想想，可以利用background的repeat来实现背景的扩展，这一样就只需要使用一个白色星号和一个红色星号就ok了。