移動 web 開發問題列表

阿新 • • 發佈：2018-11-08

偽類 :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-DE http://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).trigger("mousedown");

原生 js 方式:

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

iOS Issues

[](Position fixed & scrolling on iOS)

iOS 5.0- 的 Date 建構函式不支援規範標準中定義的 YYYY-MM-DD 格式，如 new Date('2013-11-11') 是 Invalid Date, 但支援 YYYY/MM/DD 格式，可用 new Date('2013/11/11')
IOS（7.1.1 版本）使用 webapp 模式時滾動元素無法滾動到頭，解決辦法是設定

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

讓 APP 佔用整個螢幕空間佈局。

IOS（7.1.1 版本）滾動元素中設定其中某個元素的 innerHTML 屬性一定機率導致畫面閃動（估計是觸發了重繪），解決辦法是設定文字時使用 textContent 屬性。
IOS（7.1.1 版本）動態改變滾動元素中某個元素 top 屬性一定機率導致畫面閃動，解決辦法是使用 translateY 替代
IOS（7.1.1 版本）通過-webkit-overflow-scrolling: touch 方式設定的滾動元素時，如果滾到頭的時候拖動，會出現頁面的整體滾動，解決辦法見
IOS8 一個頁面內播放超過 15 個 video 之後觸發解碼器錯誤，將不能繼續播放其他 video。

Andorid Issues

三星 I9100 （Android 4.0.4）不支援 display:-webkit-flex 這種寫法的彈性佈局，

但支援 display:-webkit-box 這種寫法的佈局,

相關的屬性也要相應修改，如-webkit-box-pack: center;

移動端採用彈性佈局時，建議直接寫 display:-webkit-box 系列的佈局

touchmove 事件在 Android 部分機型(如 LG Nexus 5 android4.4，小米 2 android 4.1.1)上只會觸發一次

解決方案是在觸發函式裡面加上 e.preventDefault(); 記得將 e 也傳進去。

移動 web 開發 問題列表