移动Web开发之总结

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。备注：transparent的属性值在android下无效。

2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。

3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅（这个属性会调用硬件加速模式），但是在android下不可乱用，很多见所未见的bug就是因为这个。

4、@-webkit-keyframes可以预定义很多你所想到的动画，然后通过-webkit-transition来调用。

5、-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size，所以有必要两个都要写上；用这个属性的时候推荐树勇cover这个值，可以自动去匹配宽和高。

6、text-shadow多用这个属性，可以美化文字效果。

7、border-radius、box-shadow、gradient、border-image，不解释，可以精简代码。

8、android、ios4及以下，固定宽/高块级元素的overflow:scroll/auto失效，属于浏览器的bug，可借助第三方工具实现。

9、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。

10、width可是宽度，initial-scale初始化缩放比例，maximum-scale允许用户缩放的最大比例，minimum- scale允许用户缩放的最小比例，user-scalable是否允许用户缩放。11、允许用户添加到主屏幕，并提供webapp的支持。

12、css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。

13、使用media query适配不同屏幕。

14、如果涉及较多域外链接，DNS Prefetching可以帮你做DNS预解析。

15、如果你希望你的站点更多地在SNS上传播，那么Open Graph Protocol会比较适合你。

16、当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡。

17、-webkit-user-select: none; 禁止用户进行复制.选择。

========lazyload.js 实现列表图片异步加载

//先载入jquery  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  //再载入lazyload  <script type="text/javascript" src="http://www.jo2.org/js/jquery.lazyload.js"></script>  <script type="text/javascript">  jQuery(document).ready(  function($){  $("img").lazyload({    placeholder : "异步图片加载地址", //加载图片前的占位图片    effect : "fadeIn" //加载图片使用的效果(淡入)  });  });  </script>