移動端遇到的問題

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>