移动端遇到的问题
跨域问题
手机浏览器也是浏览器，在ajax调用外部api的时候也存在跨域问题，这时候可以让后端加上两个http头
Access-Control-Allow-Origin "*"
Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
第一个头可以避免跨域问题，第二个头可以方便ajax请求设置content-type等配置项
zepto使用当中遇到的问题
Zepto 源码中有 14 个模块，而官网提供的标准版里面只有 7 个模块！而且居然不包含对移动端开发非常重要的 touch 模块（提供对触摸事件的支持）！
所以我的建议是，不要从官网下载，而是从 Github 下载了源代码之后自己 Build 一个版本，这样你可以自行挑选适合的模块，下面说说我了解的一些模块
- polyfill，zepto，detect，event，ajax，form，fx 这7个就是标准版包含的模块
- fx_methods 有了这个模块之后，.show() .hide() 等几个方法才能支持动画了，比如
.show('fast') - data 提供对 .data() 方法的完整支持，像 jQuery 一样用内存对象存储
- assets 移除 img 元素后做一些特殊处理，用来清理内存
- selector 更多的选择器的支持，后面会提到
- touch 对触摸事件的支持，比如 tap 事件
不要使用click事件而用tap事件
click 事件有 200~300 ms 的延迟，为了更快的响应，最好用 Zepto 提供的 tap 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成
zepto对css选择器的支持远不如jQuery
:text :checkbox :first 等等在 jQuery 里面很常用的选择器，Zepto 不支持！原因很简单，jQuery 通过自己编写的 sizzle 引擎来支持 CSS 选择器，而 Zepto 是直接通过浏览器提供的document.querySelectorAll 接口。这个接口只支持标准的 CSS 选择器，而上面提到的那些属于 jQuery 选择器扩展，所以仔细看看这个网页，注意一下这些选择器。
上面提到的 selector 模块，如果有这个模块的话，能够支持 部分 的 jQuery 选择器扩展，列举如下：
- :visible :hidden
- :selected :checked
- :parent
- :first :last :eq
- :contains :has
元素的尺寸计算
Zepto 没有 .innerHeight() .outerWidth() 等四个方法，其次，它的 .height()/.width() 方法也不完善，对于display:none 的元素，计算出的高宽都是 0
为什么jQuery能够将display:none的元素计算出尺寸呢，查看源码可以发现原来是jQuery会先设置其css样式为
position: "absolute", visibility: "hidden", display: "block"
计算完高宽后再恢复
prop方法的缺陷
以为用下面这句代码可以实现把一个文本框设置为只读
$('#text').prop('readonly', true)
结果却发现只能写成如下才能工作：
$('#text').prop('readOnly', true)
那为什么jQuery运用上面一句照样也能工作呢，查看源码后发现原因很简单那就是
jQuery.each([ "tabIndex", "readOnly", "maxLength", "cellSpacing", "cellPadding", "rowSpan", "colSpan", "useMap", "frameBorder", "contentEditable" ], function() { jQuery.propFix[ this.toLowerCase() ] = this; });
使用fadeIn()方法替代show方法
Zepto 的 .show() 动画实现的很简单，没有高宽的变化，而是将透明度从 0 逐渐变为 1
如果没有 fx_mehods 模块的话，.show() 方法是不支持动画的，不过有了这模块后，动画的支持还是有点小问题，所以建议使用 .fadeIn() 方法来替代 .show()
CSS 3滤镜
-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);
交叉淡变
background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);
iphone5媒体查询
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {/* iPhone 5 or iPod Touch 5th generation */}
使用媒体查询，提供不同的启动图片：
<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)"> <link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">
andriod上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
移动端 HTML5 input date 不支持 placeholder 问题
input type date 的 placeholder 支持性有一定问题，因为浏览器会针对此类型 input 增加 datepicker 模块，看上去没那么必要支持 placeholder。对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式，iOS 上会有 datepicker 不会显示 placeholder 文字
解决方法很简单，先使其 type 为 text，此时支持 placeholder，当触摸或者聚焦的时候，使用 JS 切换使其触发 datepicker 功能
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
移动端 HTML5 audio autoplay 失效问题
由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放
解决方法很简单，先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
touchmove事件的小细节
通常情况下我们会这样
$('div').on('touchmove', function(){
//.….code
});
如果中间的 code 需要处理的东西多的话，FPS(FPS代表每秒钟屏幕刷新的次数，当该参数变低时，会导致屏幕变卡、延迟出效果) 就会下降影响程序顺滑度，而如果改成如下这样会快很多（事实上你了解JS作用域链就会清楚原理 有兴趣可以看我另外一篇博文 里面有介绍到）
$('div').on('touchmove', function(){
setTimeout(function(){
//.….code
},0);
});
禁止用户选中文字
-webkit-user-select:none
禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />
-
使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
-
若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" />
动画过程中动画闪白问题
使用 CSS3 动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏。
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
横竖屏会出现字体加粗不一致问题
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%;
伪类 :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>