DUDU 1.安卓浏览器看背景图片，有些设备会模糊。devicePixelRatiod的问题,使用2x的背景图来代替img标签（一般情况都是用2倍）.
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定
background-size:contain;
2.图片加载很慢
手机开发一般用canvas方法js动态加载图片
3.手机网站不用兼容IE浏览器
使用zeptojs。
4.防止手机中网页放大和缩小
< meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
5.html5调用安卓或者ios的拨号功能
< a href="tel:10010">10010< /a>
6.上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
7.禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
8.长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
9.iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance: none;
}
10.ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
11.active兼容处理即伪类:active 失效
方法一：body标签加 ontouchstart=""
方法二：js给 document 绑定 touchstart 或 touchend 事件
12.动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
13.旋转屏幕时，字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
14.transition闪屏
/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
-webkit-backface-visibility:hidden;
15.圆角bug某些Android手机圆角失效
background-clip: padding-box;
16.顶部状态栏背景色
< meta name="apple-mobile-web-app-status-bar-style" content="black" />
除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。默认值是default。
如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。
设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。
如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。
17.设置缓存
< meta http-equiv="Cache-Control" content="no-cache" />
18. IOS中input键盘事件keyup、keydown、keypress支持不是很好
可以用html5的oninput事件去代替keyup
document.getElementById('testInput').addEventListener('input', function(e){var value = e.target.value;});
19.ios 设置input 按钮样式会被默认样式覆盖
input,textarea {
border: 0;
-webkit-appearance: none;
}
20.IOS键盘字母输入，默认首字母大写
< input type="text" autocapitalize="off" />
21.select 下拉选择设置右对齐
select option {
direction: rtl;
}
22.通过transform进行skew变形，rotate旋转会造成出现锯齿现象
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0);
23.移动端点击300ms延迟
300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。推荐两个js，一个是fastclick，一个是tap.js
23.移动端点透问题
原因：touchstart 早于 touchend 早于click。 即click的触发有延迟的大概在300ms，tap触发之后蒙层隐藏300ms之后蒙层隐藏click触发到了下面的a链接上。
（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
（2）用fastclick，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a标签的click
（5）以上一般都能解决，实在不行就换成click事件。
24.消除 IE10 里面的那个叉号
input:-ms-clear{display:none;}
25.关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
26.移动端 HTML5 audio autoplay 失效问题
先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
27.iOS微信中点击表单元素后触摸点错位的兼容
点击事件加window.scrollTo(0, 0); position定位不要使用fixed
28.font-size在iOS和安卓下大小不一致的解决办法
-webkit-text-size-adjust: none;作用：禁用Webkit内核浏览器的文字大小调整功能，以实际大小显示，部分浏览器不支持小于12px的字号将使用12px字体。
29.自动播放音乐:
//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);