前端学习之------浏览器兼容（移动端）

1、禁止IOS识别长串数字为电话

?

1	<meta content="telephone=no" name="format-detection">

2、禁止IOS弹出各种操作窗口

?

1 2 3

.box{     -webkit-touch-callout: none; }

3、禁止Android手机识别邮箱

?

1	<meta content="email=no" name="format-detection">

4、禁止IOS和Android用户选中文字

?

1 2 3

.box{     -webkit-user-select: none; }

5、IOS下取消input在输入的时候英文首字母的默认大写

?

1	<input type="text" autocapitalize="off" autocorrect="off">

6、Android下取消输入语音按钮

?

1 2 3

input::-webkit-input-speech-button{     display: none; }

7、在IOS和Android端都有效的修改点击高亮效果

?

1 2 3

.box{     -webkit-tap-highlight-color: aqua; }

8、overflow:scroll或auto，在IOS上滑动卡顿的问题

?

1 2 3

.box{     -webkit-overflow-scrolling: touch; }

9、移动端click300ms延时响应

使用fastclick插件

?

1 2	import FastClick from 'fastclick' FastClick.attach(document.body)