跨域問題
手機瀏覽器也是瀏覽器，在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>
 |
不含病毒。www.avast.com |
留言列表
