移动端遇到的问题

https://github.com/AlloyTeam/Mars
https://github.com/hoosin/mobile-web-favorites

跨域问题

手机浏览器也是浏览器，在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>