移动端开发的兼容问题
1. button高亮显示问题
问题：
点击置灰状态的button按钮，按钮会闪一下蓝色，这和我原本的样式冲突。在此之前已经清除了outline：none，:active伪类元素等造成的影响，那么为什么还是会有这种现象。
我们在做移动端开发的时候忽略了一个鲜为人知的属性。 -webkit-tap-highlight-color。它的功能是移动端点击时的背景设置。这个属性只适用于ios。当我们点击button时，它会高亮显示。outline：none在移动端这时是不起作用的，想要去除文本框的默认样式使用的是-webkit-appearance，在iOS上加上这个属性才能给按钮和输入框自定义样式，聚焦时取消默认样式是-webkit-tap-highlight-color。
解决方案：
在这个元素上面加上 -webkit-tap-highlight-color:transparent; -webkit-appearance: none; 就可以解决上面这个问题了。
补充：
-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整。但是它会导致input/textarea输入框无法输入，我们写的时候要注意。
-webkit-touch-callout:none; 禁用长按页面时的弹出菜单(iOS下有效) ,取消了放大镜?效果。但是注意的是在企业微信里面这个是不起作用的，长按依旧会有放大镜效果。
2. ios字体问题
问题：
对于手机上的字体来说，我们不能控制。我们主要针对字体修改的就是：衬线与非衬线、顺滑设置。
3. 多行文本溢出失效
问题：
正常情况下，我们默认最多显示三行文字，代码如下所示。但是我们在审查元素的时候发现-webkit-box-orient: vertical;失效。
解决方案:
这是由于webpack打包时，optimize-css-assets-webpack-plugin这个插件造成的。注释掉webpack.prod.conf.js中下面的代码就可以了。
4. ES6新特性：symbol类型造成的问题
问题
在项目中，我需要删除数组中的某个元素，代码如下。
解决方案
使用splice方法，遍历重新拿到tag数组，然后赋给tag
6.长时间按住页面出现闪退
element {undefined
-webkit-touch-callout:none;
}
7.iphone及ipad下输入框默认内阴影
Element{undefined
-webkit-appearance:none;
}
8.旋转屏幕时，字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{undefined
-webkit-text-size-adjust:100%;
}
9.圆角bug
某些Android手机圆角失效
background-clip: padding-box;
10.设置缓存
<meta http-equiv="Cache-Control"content="no-cache"/>
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
移动端点击300ms延迟
300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。
推荐两个js，一个是fastclick，一个是tap.js
关于300ms延迟，具体请看：http://thx.github.io/mobile/300ms-click-delay/
ios和android下触摸元素时出现半透明灰色遮罩
Element {undefined
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。
后面一篇文章有详细介绍，地址：http://www.jb51.net/post/phone_web_ysk
桌面图标
<link rel="apple-touch-icon"href="touch-icon-iphone.png"/>
<link rel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"/>
<link rel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"/>
iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。
上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！
<link rel="apple-touch-icon-precomposed"href="touch-icon-iphone.png"/>
图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px)
启动画面
<link rel="apple-touch-startup-image"href="start.png"/>
iOS下页面启动加载时显示的画面图片，避免加载时的白屏。
可以通过madia来指定不同的大小：
<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png"media="(device-width: 320px)" rel="apple-touch-startup-image"/>
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
<!-- iPhone 5-->
<link rel="apple-touch-startup-image"media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait-->
<link href="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"/>
<!-- iPad landscape-->
<link href="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"/>
<!-- iPad Retina portrait-->
<link href="apple-touch-startup-image-1536x2008.png"media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
<!-- iPad Retina landscape-->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/>
IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！
ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,
textarea {undefined
border: 0;
-webkit-appearance: none;
}
设置默认样式为none
解决办法：
可以用html5的oninput事件去代替keyup
<input type="text"id="testInput">
<script type="text/javascript">
document.getElementById('testInput').addEventListener('input',function(e){undefined
varvalue = e.target.value;
});
</script>
