移动端技巧分享
一、
-webkit-font-smoothing: antialiased;//让页面里的字体变清晰
-webkit-user-select: none;//手机文本不可选中
-webkit-appearance: none;//去除按钮默认样式
-webkit-tap-highlight-color: rgba(0,0,0,0);//手机取消选中蒙板
-webkit-touch-callout: none;//禁止默认系统菜单
二、Chrome浏览器小于12px字号不生效的问题
Chrome浏览器在解析字体大小时，最小字号为12px,小于这个大小的字号都会解析成12px,当你把一行文字设为10px时Chrome浏览器会按12px来解析。
解决这个问题的方法是:
(1) 在html或者body或者单独的具体样式里添加一句谷歌浏览器专有的属性。
html，body{ -webkit-text-size-adjust:none; }
这样写的话，CSS中font-size就可以自由设定，完全无需考虑Chrome的12px的问题了。
此外这个CSS设置同时还纠正了网页在iPhone和iTouch上浏览网页时同样出现的字体错误。
(2) 但是最新版本的google浏览器已经不支持-webkit-text-size-adjust了，我们可以通过css3的scale来缩放，所以我们最好定义一个独立属性。
.fontshrink{-webkit-text-size-adjust:none;-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
这样只需要在我们需要缩放的标签上加上这个classname的引用就可以了。
但是你会发现。会存在一定的边距。貌似margin或者padding的间距。这就是缩放存在问题。原来的位置还占有12px字体的大小。
所以，要对应修改margin了。定义为负的。
延伸：禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html { -webkit-text-size-adjust: 100%;}
解决字体在移动端比例缩小后出现锯齿的问题：
-webkit-font-smoothing: antialiased;
三、边框圆角致背景溢出
在红米和OPPO等手机某些版本的 Android Webview 中，如果一个元素定义了 border + border-radius，这时如果该元素有背景，那么背景将会溢出圆角之外。
之所以会出现这个问题：其主要原因是因为CSS对背景裁剪（background-clip）有不同的处理方式，通常它可以是 border-box | padding-box | content-box 这3种方式。
浏览器的默认裁减方式是 border-box，即溢出 border 之外的背景都将被裁减。
对于上述无法裁减边框之外背景的手机，将值定义为 padding-box | content-box 都能fix这问题，不过更推荐使用 padding-box。因为使用 content-box，如果定义了 padding 不为 0，背景将无法铺满元素。
四、禁用长按页面时的弹出菜单
通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
img {-webkit-touch-callout: none;}
需要注意的是，该方法只在 iOS 上有效。
五、禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以禁掉：
html { -webkit-user-select: none;}
兼容IE6-9的写法：onselectstart="return false;" unselectable="on"
六．关闭iOS键盘首字母自动大写
<input type="text" autocapitalize="off" />
七、取消点击元素产生背景或边框怎么去掉
1）在ios和android系统中，用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置
-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
（2）winphone系统,点击标签产生的灰色半透明背景，能通过设置
<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，内容可读写，但粘贴内容中的富文本格式（如文本的颜色、大小，图片等）会丢失。内容类似于以纯文本显示。contenteditable="plaintext-only"和CSS只的-webkit-user-modify: read-write-plaintext-only一样，目前仅仅是Chrome浏览器支持比较好的。transparent的属性值在android下无效。
八、关闭iOS输入自动修正
在iOS中，默认输入法会开启自动修正输入内容的功能，如果不需要的话，可以这样：
<input type="text" autocorrect="off" />
九．移除ios的input默认样式
input[type=input]{-webkit-appearance:none;}
但这个属性存在bug，会导致iso无法获取checkbox值，给这个元素重新赋上
input[type=checkbox]{-webkit-appearance:checkbox;}
就不会报错了。
十．active兼容处理 即 伪类 :active 失效
给a标签加a:active属性和添加一段空函数
(1)body添加ontouchstart
(2)document.body.addEventListener('touchend', function () { },false);
十一、设置input里面placeholder字体的样式
::-webkit-input-placeholder{ font-size:10px; color:#f00;}
:-webkit-placeholder{ font-size:10px; color:#f00;} /* Mozilla Firefox 4 to 18*/
::-webkit-placeholder{ font-size:10px; color:#f00;} /* Mozilla Firefox 19+ */
::-ms-input-placeholder{ font-size:10px; color:#f00;} /* IE 10+ */
input:focus::-webkit-input-placeholder{ font-size:10px; color:#f00;} 获得焦点
十二、 电话号码识别
在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：7位数字，形如：1234567带括号及加号的数字，形如：(+86)123456789双连接线的数字，形如：00-00-00111、位数字，形如：13800138000可能还有其他类型的数字也会被识别，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。
关闭电话号码识别：
<meta name="format-detection" content="telephone=no" />
开启拨打电话功能：
<a href="tel:123456">123456</a>
开启发送短信功能：
<a href="sms:123456">123456</a>
十三．允许全屏模式浏览,隐藏浏览器导航栏 (iphone中safari私有) ios7.0版本以上，就看不到效果了
<meta name="apple-mobile-web-app-capable" content="yes" />
iphone中safari顶端的状态条的样式black(黑色) (iphone中safari私有)
<meta name="apple-mobile-web-app-status-bar-style" content="black">可选black、default/balck-translucent
十四. 邮箱地址识别
在 Android （iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。
关闭邮箱地址识别：<meta name="format-detection" content="email=no" />
开启邮件发送：<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
如果想同时关闭电话和邮箱识别，可以把它们写到一条 meta 内，代码如下：
<meta name="format-detection" content="telephone=no,email=no" />
（1）普通邮件
<a href=”mailto:12345678@qq.com”>点击我发邮件</a>
（2）抄送邮件
<a href=”mailto:12345678@qq.com?cc=87654321@qq.com”>点击我发邮件</a>
（3）密送邮件
<a href=”mailto:12345678@qq.com?cc=87654321@qq.com&bcc=19283746@qq.com”>点击我发邮件</a>
（4）发送、抄送、密送多个人邮件
<a href=”mailto:12345678@qq.com;89765437@qq.com
?cc=87654321@qq.com&bcc=19283746@qq.com”>点击我发邮件</a>
（5）包含主题
<a href=”mailto:12345678@qq.com?subject=邮件主题”>点击我发邮件</a>
（5）包含内容
<a href=”mailto:12345678@qq.com?body=邮件主题(也可以加链接地址、图片（pc不支持）)”>点击我发邮件</a>
十五. audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
十六. 消除transition闪屏
.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective:1000;
}
十七．上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
十八．动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
十九. 图片下面出现空白像素BUG
记得加上display：block；属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。
1、将图片转换为块级对象可去掉下边空白
即，设置img为：
display:block;
2、设置图片的垂直对齐方式
即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以去掉下边空白。
3、设置父对象的文字大小为0px
即，在#sub中添加一行：
font-size:0;
可以解决空白问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。
4、改变父对象的属性
如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置：
overflow:hidden; 来去掉空白。
5、设置图片的浮动属性也可去掉空白
即在本例中增加一行CSS代码：
#sub img {float:left;}
二十、ios和android下触摸元素时出现半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。
二十一、Retina屏的1px边框
Element{ border-width: thin;}html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%;}-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0)