移动端兼容问题列表
伪类 :active 生效
要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件
<style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >bar</a> <script> document.addEventListener('touchstart',function(){},false); </script>
消除 transition 闪屏
两个方法
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
JS 事件相关
click 事件普遍 300ms 的延迟 在手机上绑定 click 事件，会使得操作有 300ms 的延迟，体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替 click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成
iOS 点击会慢 300ms 问题
https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE http://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari
fastclick.js
禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
禁止用户选中文字
-webkit-user-select:none
关于 iOS 系统中，WebAPP 启动图片在不同设备上的适应性设置
<!-- iPhone ICON --> <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon"> <!-- iPad ICON--> <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon"> <!-- iPhone (Retina) ICON--> <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon"> <!-- iPad (Retina) ICON--> <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon"> <!-- iPhone SPLASHSCREEN--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) SPLASHSCREEN--> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) SPLASHSCREEN--> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) SPLASHSCREEN--> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) SPLASHSCREEN--> <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) SPLASHSCREEN--> <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格(焦点科技葛亮)
可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');
移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
解决代码：
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
方案出处：http://stackoverflow.com/questions/17350924/iphone-html5-audio-tag-not-working
扩展阅读：http://yujiangshui.com/recent-projects-review/#toc-7
移动端 HTML5 input date 不支持 placeholder 问题
问题解决方法：
先使其 type 为 text，此时支持 placeholder，当触摸或者聚焦的时候，使用 JS 切换使其触发 datepicker 功能。
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
