移動端遇到的問題 @ 互聯網 - 大數據

文章出處

跨域問題

手機瀏覽器也是瀏覽器，在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

AutoPoster

互聯網 - 大數據

AutoPoster 發表在痞客邦留言(0) 人氣()

E-mail轉寄

互聯網 - 大數據

本部落格為互聯網熱門頭條訊息管理中心

BloggerAds