android 4.x bug
//1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
//2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
//3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
//4.android无法同时播放多音频audio
消除transition闪屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
开启硬件加速
//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
渲染优化
//1.禁止使用iframe（阻塞父文档onload事件）
//2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）
//使用CSS3代码代替JS动画；
//开启GPU加速；
//使用base64位编码图片(不小图而言，大图不建议使用)
// 对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU。小图标优势在于：
//1.减少HTTP请求；
//2.避免文件跨域；
//3.修改及时生效；
腾讯方案
var autoScale = function(){ var ratio = 320/504, //这是设计稿的宽高比（504是Iphone的高度去掉标题栏高度） winW = document.getElement.clientWidth, winH = document.getElement.clientHeight, ratio2 = winW/winH, scale; if(ratio<ratio2){ scale = (winH/504).toString().substring(0, 6); }else{ scale = (winW/320).toString().substring(0, 6); } var cssText = \'-webkit-transform: scale(\'+scale+\');-webkit-transform-origin: top; opacity:1;\' $(\'.wrap\').attr(\'style\', cssText); } setTimeout(function(){ if(document.documentElement.clientWidth/document.documentElement.clientHeight !== 320/504){ autoScale(); }else{ $(\'.page\').css({\'opacity\': 1}); } }, 300) //添加一定时长以确保宽高获取正确 window.addEventListener(\'onorientationchange\' in window?\'orientationchange\':\'resize\', autoScale, false){ detectOrientatioin(); } //切换横竖屏 function detectOrientatioin(){ if(window.orientation==http://www.likecs.com/180 || window.orientation==http://www.likecs.com/0){ //竖屏 } if(window.orientation==http://www.likecs.com/90 || window.orientation==-90){ //横屏 } }