1、长时间按住页面出现闪退
1
2
3
|
element {
-webkit-touch-callout:
none
;
}
|
2、iphone及ipad下输入框默认内阴影
1
2
3
|
Element{
-webkit-appearance:
none
;
}
|
3、ios和android下触摸元素时出现半透明灰色遮罩
1
2
3
|
Element {
-webkit-tap-highlight-
color
:rgba(
255
,
255
,
255
,
0
)
}
|
设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。
后面一篇文章有详细介绍,地址:http://www.jb51.net/post/phone_web_ysk
4、active兼容处理 即 伪类 :active 失效
方法一:body添加ontouchstart
1
|
<
body
ontouchstart
=
""
>
|
方法二:js给 document 绑定 touchstart 或 touchend 事件
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
a {
color:
#000;
}
a:active {
color:
#fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener(
'touchstart'
,
function
(){},
false
);
</script>
|
5、动画定义3D启用硬件加速
1
2
3
4
|
Element {
-webkit-transform:translate
3
d(
0
,
0
,
0
)
transform: translate
3
d(
0
,
0
,
0
);
}
|
6、format-detection
format-detection 启动或禁用自动识别页面中的电话号码。
语法:
1
|
<meta name=
"format-detection"
content=
"telephone=no"
>
|
说明:
默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
7、html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。
如下:
1
|
<
a
href
=
"tel:4008106999,1034"
>400-810-6999 转 1034</
a
>
|
拨打手机直接如下
<a href="tel:15677776767">点击拨打15677776767</a>
8、html5GPS定位功能
具体请看:http://www.jb51.net/post/html5_GPS_getCurrentPosition
9、上下拉动滚动条时卡顿、慢
1
2
3
4
|
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
|
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
10、禁止复制、选中文本
1
2
3
4
5
6
|
Element {
-webkit-user-select:
none
;
-moz-user-select:
none
;
-khtml-user-select:
none
;
user-select:
none
;
}
|
解决移动设备可选中页面文本(视产品需要而定)