1,tap后会出现一个半透明的灰色背景。起初以为是outline作怪，加上后发现没反应。最后发现是tap后的背景高亮，要重设这个表现，则须要设置-webkit-tap-highlight-color为所需色彩。直接透明吧：a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
2,另外，怎样去掉textarea,input的默认样式（IOS上的圆角及内阴影等，Android未測试）：input,textarea,a{-webkit-appearance:none;}
去除点击背景高亮：-webkit-tap-highlight-color: transparent;
3,手机端click有一秒延迟 很明显哦。。。
假设设置为tap/touchstart事件。click依旧会触发。看上去像点击穿透，须要stop阻止click事件触发。
4,禁止号码识别：<meta name="format-detection" content="telephone=no">
5,滚动栏出现后卡顿问题解决：-webkit-overflow-scrolling: touch;
6，不同浏览器获取宽度不统一：document.body.clientWidth比較靠谱；window.innerWidth Safari中不正确。window.screen.width Android微信浏览器不正确。
7，多次点击绝对定位div移位问题：改动为fixed定位，可能导致其它div也须要设置为fixed。
见还有一篇《小技巧css解决移动端ios不兼容position:fixed》
8，微信长按图片须要等待5s以上出现保存图片弹窗，大多是由于图片太大。cdn加速就可以解决这个问题。
9，overflow:hidden 在iphone Safari下失效，可在设置的div里面新增一个div 设置position:relative；overflow:hidden就可以；
10。transform属性会渲染一个新的空间
导致fixed定位以设置为transform的div为基准。解决：1。fixed定位元素摘到transform元素外面；2。能够在动画运行完毕后js去掉该属性；z-Index也会失效。
11，flex布局在UC浏览器span标签需改成div才生效
手机端调试工具： weinre
手机端跳转到appstore下载app
html:
<div id="wechatTip" class="wechat-tip"> <img src="/resource/images/tip.png" alt="在浏览器中打开"> </div> css:
.wechat-tip {
text-align: right;
display: none;
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.8);
}
.wechat-tip img {
max-width: 88%;
margin-right: 1rem;
}
js
$(document).on(‘click‘, ‘#download‘, function(event) {
var userAgent = navigator.userAgent.toLowerCase();
if( /(micromessenger)/i.test(userAgent) ){
event.preventDefault();
$(‘#wechatTip‘).show();
} else if (/(iphone|ipad|ipod|ios)/i.test(userAgent)){
return;
} else if (/(android)/i.test(userAgent)){
event.preventDefault();
window.location = "http://www.mioji.com/download/android/MiojiTravel_1_v1.1.0.apk";
} else{
event.preventDefault();
alert("请用安卓或者苹果手机下载APP。");
}
});