移動 web 開發 問題列表
偽類 :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 啟動圖片在不同裝置上的適應性設定
關於 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)
移動端 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">
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 的元素沒有被自動向下移動(沒有重繪)。
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
也傳進去。