移動端問題彙總

問題列表

僞類 :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>

消除 transition 閃屏

兩個方法

-webkit-transform-style: preserve-3d;
/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-backface-visibility: hidden;
/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/

消除 IE10 裏面的那個叉號

input:-ms-clear{display:none;}

來源出處：http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx

關於 iOS 與 OS X 端字體的優化(橫豎屏會出現字體加粗不一致等)

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%;

JS 事件相關

click 事件廣泛 300ms 的延遲 在手機上綁定 click 事件，會使得操做有 300ms 的延遲，體驗並非很好。 開發者大多數會使用封裝的 tap 事件來代替 click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成

iOS 點擊會慢 300ms 問題

https://developers.google.com/mobile/articles/fast_buttons?hl=de-DEhttp://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari

使用 CSS3 動畫的時儘可能利用3D加速，從而使得動畫變得流暢。動畫過程當中的動畫閃白能夠經過 backface-visibility 隱藏。

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

IE10 的特殊鼠標事件

http://www.mansonchor.com/blog/blog_detail_73.html

不讓 Android 手機識別郵箱

<meta content="email=no" name="format-detection" />

禁止 iOS 識別長串數字爲電話

<meta content="telephone=no" name="format-detection" />

禁止 iOS 彈出各類操做窗口

-webkit-touch-callout:none

禁止用戶選中文字

-webkit-user-select:none

動畫效果中，使用 translate 比使用定位性能高

http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

獲取滾動條

window.scrollY
window.scrollX

好比要綁定一個 touchmove 的事件，正常的狀況下相似這樣(來自呼吸二氧化碳)

$('div').on('touchmove', function(){
   //.….code
});

而若是中間的 code 須要處理的東西多的話，FPS 就會降低影響程序順滑度，而若是改爲這樣

$('div').on('touchmove', function(){
   setTimeout(function(){
     //.….code
   },0);
});

把代碼放在 setTimeout 中，會發現程序變快.

關於 iOS 系統中，WebAPP 啓動圖片在不一樣設備上的適應性設置

http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad/10011893#10011893

關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格(焦點科技葛亮)

能夠經過正則去掉

this.value = this.value.replace(/\u2006/g, '');

關於 Android WebView中，input 元素輸入時出現的怪異狀況

見圖 

Android web視圖，例如在 HTC EVO 和三星的 Galaxy Nexus 中，文本輸入框在輸入時表現的就像佔位符。狀況爲一個相似水印的東西在用戶輸入區域，一旦用戶開始輸入便會消失(見圖片)。

在 Android 的默認樣式下當輸入框得到焦點後，若存在一個絕對定位或者fixed的元素，佈局會被破壞，其餘元素與系統輸入字段會發生重疊(如搜索圖標將消失爲搜索字段)，能夠觀察到佈局與原始輸入字段有誤差(見截圖)。 這是一個至關複雜的問題，如下簡單佈局能夠重現這個問題:

<label for="phone">Phone: *</label>
<input type="tel" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />

解決方法

-webkit-user-modify: read-write-plaintext-only

詳細參考：http://www.bielousov.com/2012/android-label-text-appears-in-input-field-as-a-placeholder/ 注意，該屬性會致使中文不能輸入詞組，只能單個字。感謝鬼哥與飛（遊勇飛）貢獻此問題與解決方案

JS 動態生成的 select 下拉菜單在 Android2.x 版本的默認瀏覽器裏不起做用

解決方法刪除了 overflow-x:hidden; 而後在JS生成下來菜單以後 focus 聚焦，這兩步操做以後解決了問題。(來自島都-小Qi)

參考：http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator

移動端 HTML5 audio autoplay 失效問題

這個不是 BUG，因爲自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者沒必要要的流量消耗，因此蘋果系統和安卓系統一般都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發才能夠播放。

解決方法思路：先經過用戶 touchstart 觸碰，觸發播放並暫停（音頻開始加載，後面用 JS 再操做就沒問題了）。

解決代碼：

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

方案出處：http://stackoverflow.com/questions/17350924/iphone-html5-audio-tag-not-working

擴展閱讀：http://yujiangshui.com/recent-projects-review/#toc-7

移動端 HTML5 input date 不支持 placeholder 問題

input type date 的 placeholder 支持性有必定問題，由於瀏覽器會針對此類型 input 增長 datepicker 模塊，看上去沒那麼必要支持 placeholder。

對 input type date 使用 placeholder 的目的是爲了讓用戶更準確的輸入日期格式，iOS 上會有 datepicker 不會顯示 placeholder 文字，可是爲了統一表單外觀，每每須要顯示。Android 部分機型沒有 datepicker 也不會顯示 placeholder 文字。

簡單的進行了測試：

桌面端（Mac）

• Safari 不支持 datepicker，placeholder 正常顯示。
• Firefox 不支持 datepicker，placeholder 正常顯示。
• Chrome 支持 datepicker，顯示 年、月、日 格式，忽略 placeholder。

移動端

• iPhone5 iOS7 有 datepicker 功能，可是不顯示 placeholder。
• Andorid 4.0.4 無 datepicker 功能，不顯示 placeholder

問題解決方法：

先使其 type 爲 text，此時支持 placeholder，當觸摸或者聚焦的時候，使用 JS 切換使其觸發 datepicker 功能。

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

方案出處：http://stackoverflow.com/questions/20321202/not-showing-place-holder-for-input-type-date-field-ios-phonegap-app

IOS Safari 支持localstorage可是setItem異常（QUOTA_EXCEEDED_ERR:DOM Exception 22）

平臺：IOS8.1
  browser：Safari600.1.4

問題源自於項目須要在瀏覽器中遮罩提示,點擊關閉狀態存儲在localstorage中。Safari瀏覽器關閉後刷新頁面層依舊存在bug issue 簡單的存儲狀態可使用cookie的方式替代。

Chrome 地址欄自動隱藏交互行爲對於fixed 頂部的元素遮擋

系統：IOS8.1
瀏覽器：Chrome 26.0.1410.53

描述信息：頁面包含fixed頂部的tip element，當頁面向下滑動的時候Chrome地址欄自動隱藏，當向上滑動的時候地址欄自動出現。這種交互行爲自己的好處會增大用戶可視、交互區域。可是在Chrome 26這個版本這個瀏覽器UI佈局使用adjustPan的方式，以致於向上滑動之後fixed的元素沒有被自動向下移動（沒有重繪）。

bug fixed 解決辦法在這裏

Android平臺遮罩層下的input、select、a等元素能夠被點擊和focus(點擊穿透)

問題發現於三星手機，這個在特定需求下才會有，所以若是沒有相似問題的能夠不看。首先需求是浮層操做，在三星上被遮罩的元素依然能夠獲取focus、click、change. bug issue ，在查看bug報告list之後，找到了兩種解決方案，第一是經過層顯示之後加入對應的class名控制，第二是經過將可獲取焦點元素加入的disabled屬性，也能夠利用屬性加dom鎖定的方式（disabled的一種變換方式）

部分機型存在type爲search的input，自帶close按鈕樣式修改方法

有些機型的搜索input控件會自帶close按鈕（一個僞元素），而一般爲了兼容全部瀏覽器，咱們會本身實現一個，此時去掉原生close按鈕的方法爲

#Search::-webkit-search-cancel-button{
    display: none;    
}

若是想使用原生close按鈕，又想使其符合設計風格，能夠對這個僞元素的樣式進行修改。

喚起select的option展開

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    sltElement.dispatchEvent(event);
};