1，ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
2，webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;} 3，webkit表单输入框placeholder的文字能换行么
ios可以，android不行~
在textarea标签下都可以换行~
4，禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none} 5，禁止ios和android用户选中文字
.css{-webkit-user-select:none} 6，打电话发短信写邮件怎么实现
打电话： <a href="tel:0755-10086">打电话给:0755-10086</a> 发短信，winphone系统无效 <a href="sms:10086">发短信给: 10086</a> 写邮件： <a href=“mailto:[email protected]">[email protected]</a> 7，模拟按钮hover效果
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活移动端css的active效果。
1，直接在body上添加ontouchstart，同样可激活移动端css的active效果，比较推荐这种方式（兼容性ios5+、部分android 4+、winphone 8）
2，要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名
8，audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){ audio.play() }) 9，消除transition闪屏
网络都是这么写的，但我并没有测试出来
.css{
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ -webkit-backface-visibility: hidden; } 10，开启硬件加速
1，解决页面闪白
2，保证动画流畅
.css {
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 11，取消input在ios下，输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" /> 12，android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none} 13，H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 14，忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" /> 15，忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />作者：终身成长人格
链接：https://www.jianshu.com/p/afbec9ae84e7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。