移动端常见bug（5）

来源：互联网发布：认知语言学与人工智能编辑：程序博客网时间：2024/06/05 05:05

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
<bodyontouchstart="">

方法二：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:translate3d(0,0,0)
  transform: translate3d(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
<ahref="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;
}

解决移动设备可选中页面文本(视产品需要而定)

阅读全文

0 0