移動端問題匯總

標籤：

問題列表偽類 :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.scrollYwindow.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 系統中，中文IME輸入英文時，字母之間可能會出現一個六分之一空格(焦點科技葛亮)

可以通過正則去掉

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);};

移動端問題匯總