移动端开发细节总结 #8
Description
在移动端开发过程中，会遇到一些细节问题，在手机端展示会有一些问题，下面是一些总结：
- 防止手机中网页放大或者缩小：设置 meta 中的 viewport，使用 viewport 使页面禁止缩放，通常把
user-scalable设置为0来关闭用户对页面视图缩放的行为
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
2.启动或禁用自动识别页面中的电话号码，默认是开始的，如果想禁用
<meta name="format-detection" content="telephone=no"/>
3.拨打手机号
<a href="tel:13023232323">点击拨打 XXX</a>
4.上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
5.禁止复制、选中文本
element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
6.长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
7.输入框内阴影
element {
-webkit-appearance: none;
}
8.触摸元素时出现半透明灰色遮罩
element {
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
9.active兼容性处理，在部分手机端伪类:active失效
<body ontouchstart=""></body>
10.动画定义3D 启用硬件加速，但是会消耗更多的内存与功耗
element {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
11.retina 屏的1px 边框
element {
border-width: thin;
}
12.旋转屏幕时，字体大小调整的问题
*{
-webkit-text-size-adjust: 100%;
}
13.transition 闪屏
设置内嵌的元素在3d空间如何呈现，保留3D
-webkit-transform-style: preserve-3d;
设置进行转换的元素的背面在面对用户是是否可见/隐藏
-webkit-backface-visibility: hidden;
14.圆角 bug
某些 Android 手机圆角失效
background-clip: padding-box;
15.顶部状态栏背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black">
说明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。
16.设置缓存
<meta http-equiv="Cache-Control" content="no-cache">
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
17.IOS键盘字母输入，默认首字母大写，解决方案
<input type="text" autocapitalize="off">
iOS 输入时会自动修正，解决方案：
<input type="text" autocorrect="off"/>
18.select 下拉选择设置右对齐
select option {
direction: rtl;
}
19.通过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);
20.移动端点击300ms 延迟
解决方案：
移动端使用 tap 事件来取代 click 事件
使用两个 js
fastclick.js tap.js
21.移动端点透问题
例如
<div id="mask">这是蒙层</div>
<a>这是一个链接</a>
$('#mask').onclick(function(){
this.hide();
});
当我们点击上面的蒙层时，如果点击的位置刚好是 a 链接，这个时候在蒙层消失的时候，也会触发 a 链接，这就是点透的问题
原因：
touchstart 早于 touchend 早于 click，click 的触发是有延迟的，这个时间大概在300ms 左右，也就是我们 tap 触发之后蒙层隐藏，此时 click 还没触发，300ms 之后由于蒙层隐藏，我们的click 触发到了下面的 a 链接。
解决方案：
a.尽量使用 touch 事件代替 click 事件，使用 touchend事件
b.用fastclick 事件
c.用 preventDefault 阻止 a 标签的 click
d.延迟一定时间来处理事件（不推荐）
$('#mask').on('touchend', function(){
event.preventDefault();
});
22.在 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一的空格，解决方案，可以使用正则去掉
this.value = this.value.replace(/\u2006/g,'');
23.移动端 HTML5中 audio 的 autoplay 会失效
苹果系统和安卓系统会禁止视频自动播放
document.addEventListener('touchstart', function(){
$('#play').play();
$('#play').pause();
});
24.部分机型存在 type=search 的 input 会自带close 按钮样式修改方法
有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为
#Search::-webkit-search-cancel-button{
display: none;
}
25.改变 placeholder 的默认颜色
input::-webkit-input-placeholder{color: #aaa};
input:focus::-webkit-input-placeholder{color: #ddd};
26.移动端，在点击input输入内容的时候，这时候会有一个灰色的背景层，该如何去掉呢？
这样就可以了
-webkit-tap-highlight-color:rgba(0,0,0,0);
27.移动端点击a链接时会有一个蓝色的背景，如何取消呢
a {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}