背景
开始
1px边框
一般是采用伪元素模拟的方式
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
其他border-shadow，svg的方式也可以，根据项目实际情况选择，如果项目移动端适配用的flexible.js做适配，那就很容易做到。
具体几种方法详见：
点透问题
一般懒人处理点透的方案都是引用fastclick，但是这个插件在某些场景下也有坑，一般要用它的话最好fork下源码然后修改一下，开发中遇到了以下2个坑：
1.安卓某些版本触发两次点击问题
2.光标移位问题（这个问题排查了了好久才找到是fastclick的问题）
键盘遮挡输入框问题
这种输入在页面下方的布局也很常见，一般评论，留言，聊天都会使用这种布局，但是有时候弹起的键盘会盖住输入框，解决方案如下：
移动web页面，input获取焦点弹出系统虚拟键盘时，挡住input，求解决方案？
浮层上进行滑动，浮层下面的页面也跟着滚动
web移动端浮层滚动阻止window窗体滚动JS/CSS处理
安卓border-radius:50%不圆
使用了rem做适配后使用具体值设定border-radius，不要用百分比，否则有些安卓机上50%是个椭圆形。
安卓元素无法垂直居中问题
这个我line-height居中，定位+transform，flex居中都试过，但都是偏上一些，不能垂直居中，最后还是用的zoom解决。
安卓部分版本input里的placeholder位置偏上
把input的line-height设为normal
input{
line-height:normal
};详细原理看stackoverflow上的这个回答：
ios的body设置overflow:hidden后仍然可以滚动
一般在所有元素最外层再包一个大盒子.wrapper
.wrapper{
position:relative;
overflow:hidden;
}stackoverflow上有好几种处理方法，可以顺便参考下：
Does overflow:hidden applied to <body> work on iPhone Safari?
ios fixed布局问题
这种输入框在固定在最上面布局很常见，但是用ios下当键盘弹起时fixed会失效。解决办法在下面文章里：
一句话解释就是把页面滚动改为容器内滚动。
ios日期转换NAN问题
JavaScript中的Date对象在Safari与IOS中的“大坑”
ios滚动卡顿
滚动的容器加上这个
-webkit-overflow-scrolling: touch;
ios滚动时动画停止
移动端滚动懒人推荐使用better-scroll，很好的插件
ios滚动动画停止的原因及其他解决办法：CSS3 动画在 iOS 上为什么会因为页面滚动也停止？
长按闪退
element {
-webkit-touch-callout:none;
}
禁止数字识别为电话号码
<meta name = "format-detection" content = "telephone=no">
取消点击高亮
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);手机旋转时禁止字体大小自动变化
-webkit-text-size-adjust:100%;
transition闪屏
.box {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
} CSS3动画卡顿
尽量使用transform，避免使用height,width,margin,padding等。可以开启GPU硬件加速，但用硬件加速的时候也要注意，因为这个也有坑，不合理使用反而会让应用越来越卡！
