无线web开发基础.docVIP

hrome Safari firefox Opera IE Android iOS 2 1+ (modern) 20- (old) 3.1+ (old) 2-21 (old) 22+ (new) 12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old) hrome Safari firefox Opera IE Android iOS 21+ (modern) 20- (old) 3.1+ (old) 2-21 (old) 22+ (new) 12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old) 可供参考：/2012/05/24/issues-with-position-fixed-scrolling-on-ios/? 2D渲染 border-radius 圆角类型 这是个非常常用的CSS的类型，几乎在所有的项目多多少少都会用到，以前在html4的时代，实现圆角是一件很费劲的事情，css3带来的属性可以很好地解决圆角问题。不过在实际使用圆角的时候，需要注意，在ios上面，实现的比较完美。在Android上，需要注意，很多机型，对于圆角的渲染处理并没有达到一个理想的状态，特别是处理圆角和直线的连接，在圆角的半径设置比较小（1-3像素）的时候，不是很明显。不过当超过4像素的时候，在部分机型上，会出现明显的圆角的边缘和直接差半个像素的问题。如果半径超大（10px)的时候，圆角会有非常明显的锯齿。因此对于大半径的圆角，不推荐使用border-radius，建议使用border-image来实现。 first-child、last-child 这个也是非常常用的伪类，特别是用在布局中，有一个非常的经典的场景，就是一个列表，要求一个列表项的上边和组后一个列表项的下边是圆角。之前如果需要实现的话，需要额外增加class来实现的。如果使用这些伪类的话，就非常的简单。 Javascript ES5标准 智能手机对js的支持比较好，对于es5的规范支持的比较好，不过还是考虑到版本兼容性问题，以下列出一些在实践中检验通过的一些方法： JSON对象 JSON对象可以说是最频繁使用的一个对象，在PC时代，由于浏览器兼容性问题，常常会引用老道写的一个JOSN类库，不过在webkit的时代，除了ios3.1之外，其他版本系统都已经支持了JSON对象，ios3.1，估计只有非常小的市场，因此可以考虑忽略。因此JSON原生对象，可以直接拿来使用，在手机上。 Array的一些方法 比如forEach，indexof，every，reduce等，都可以在手机web的开发中安全的使用 Object对象 由于Object的es5对象方法使用的比较少，没有太多的兼容性的反馈，建议大家谨慎使用 Date now是一个新方法，不过不是所有的系统版本都支持,建议谨慎使用，可以使用getTime来替代，实现的代码量很少 DOM选择器 html5为了我们提供了一个非常好的DOM选择器，就是document.querySelector和document.querySelectorAll这两个方法，这两个方法在android2.1+以及ios3+以后，都可以使用，其接受的参数为css选择器。在实际web开发中，有一部大部分工作会用到DOM的操作，通过这个神器，可以解决大多数的DOM的操作。建议大家使用的时候，可以多多使用这两个方法。 其他的DOM的选择器的兼容性并不是太好，建议不要使用。 Zepto 对于jquery大家应该会非常的熟悉，在web手机上也有一个轻量级的类库工具，那就是Zepto，它的很多api接口保持和jquery的接口兼容，其体积非常小，gzip的包在10k左右，非常适合在手机上的无线环境中加载。建议大家在使用类库的时候，推荐使用，其api地址为:/ click的300ms延迟响应 说到移动开发，不得不说一下这个click事件，在手机上被叫的最多的就是点击的反应慢，就是click惹出来的事情。情况是在这样，在手机早期，浏览器有系统级的放大和缩小的功能，用户在屏幕上点击两次之后，系统会触发站点的放大/缩小功能。不过由于系统需要判断用户在点击之后，有没有接下来的第二次点击，因此在用户点击第一次的时候，会强制等待300ms，等待用户在这个时间内，是否有用户第二次的提交，如果没有的话，就会click的事件，否则就会触发放大/缩小的效果。 这个设计本来没有问题，但是在绝大多数的手机操作中，用户的单击事件的概率大大大于双击的，因此所有用户的点击都必须要等300ms，才能触发click事件，造成给用户给反应迟钝的反应，这个难以解决。业界普遍解决的方案是自己通过touch的事件完成