css3兼容性問題概括

Android2.3的overflow問題

在android2.3及如下系統版本的瀏覽器不支持overflow：scroll / auto，即在頁面元素裏面的內容若是超過了父元素或祖先元素的高度是沒法滾動的，能夠經過css3的transform來實現滾動，表明做：iscroll。

Android2.3的聚焦問題

Android2.3會出現點擊聚焦的狀況，出現黃色的邊框，經過對相應的元素設置css –webkit-tap-highlight-color: rgba(0,0,0,0)解決，另一些高版本的系統也可能會出現有黃色邊框的狀況，這時候試着用outline：none來解決。

Android2.3 position:fixed及input中文輸入bug

在android2.3系統中，若是頁面中有position爲fixed的元素，input外層的元素定位爲relative或者自身的定位爲relative，就會產生一種奇怪的現象，在input中輸入數字或者字母都很正常，當切換輸入法爲中文後，發現沒法輸入，當把position設置爲absolute後一切正常，全部當遇到這種狀況時就只能改變佈局了。

Android2.3 border-radius問題

不支持百分比，可用一個比較大的值 如： 9999px。

Android2.3 動畫問題

@-webkit-keyframes wave1{0%{ opacity:0;}8.33%{ opacity:1;}99%{opacity:1;}100%{}}

100%要留一幀空出來。在100%以前寫一個最後值 99%那裏寫。2.3系統的動畫纔會動。

Android2.3漸變問題

漸變這樣寫2.3才兼容：

background:-webkit-gradient(linear,00,0100%, color-stop(1%,rgba(111,191,7,0)), color-stop(74%,rgba(111,191,7,0)), color-stop(75%,rgba(111,191,7,0.9)), color-stop(100%,rgba(111,191,7,0.9)));

Linear是指漸變方式，0 0指從哪一個方向開始。0 0 到 0 100% 說明是從上到下漸變。 後面的color-stop 能夠指定百分比和顏色值。

Android4.0及低版本系統touch事件bug

在android4.0系統中，存在部分子版本的系統有touch事件的bug，表現爲touchstart是正常的，touchmove只有在touchstart觸發的時候觸發一次，touchend不會被觸發，android2.3會觸發startmove一次，當touch結束後會執行剩餘的move和end。在zepto庫中此問題也沒有獲得解決,在android4.2系統中也存在這樣的問題，後來發現是瀏覽器將事件cancel調了，目的應該是防止在滾動頁面的時候調用，因此在touchmove事件中添加e.preventDefault()，發現touchend被觸發了，因此解決方案根據實際使用場景來進行處理。

Android4.X placeholder問題

placeholder 文字字體會偏上。 可是placeholder只能設置他的color。如：

input::-webkit-input-placeholder{ color:red;}

行高不能設置。這時候把line-height設成normal 就能上下居中了。

各個系統對position:fixed的支持狀況

手機Safari – iOS5及之後版本都支持. iOS4及如下版本不支持，會當作static處理.

Android

• Android 2.1 及如下版本不支持.
• Android 2.2 滾動過程當中不保持fixed的位置，滾動完成後回到fixed的位置.
• Android 2.3 支持fixed, 可是要求頁面禁止縮放.
• Android 3和4支持fixed.

Touchstart, click, tap事件分析

在移動端咱們會常常用到touch事件，touchstart事件很靈敏，全部若是要綁定相似於pc端的click事件，用touchstart會常常的誤操做，例如滾動頁面的時候被誤點，全部市面上有不少手勢庫，封裝出了tap等方面，而在移動端click事件也是能夠觸發的，click事件會在點擊300ms左右出發（緣由是瀏覽器但願判斷是不是雙擊），原始的解釋參見google這篇[Creating Fast Buttons for Mobile Web Applications](Creating Fast Buttons for Mobile Web Applications)，我的通過實驗，頁面元素的點擊能夠考慮用click，和tap效果無明顯差異，因此在沒有手勢庫的狀況下能夠考慮用click來處理用戶的點擊行爲。

禁用webkit瀏覽器默認樣式

webkit上的input,button,及select的默認樣式能夠經過 –webkit-appearance:none禁用，而後自定義。

Placeholder自適應bug

一個placeholder自適應bug，頁面中使用<input>標籤而且有屬性placeholder，在頁面橫屏再轉回豎屏時，會致使頁面沒法自適應，不管是android仍是ios都會中招。

解決方法是，在<input>外層容器中加overflow:hidden

無刷新改變當前頁面url的問題整理

Android 2.3系統存在的問題：

1. 無刷新改變當前頁面url。不支持onpopstate方法，可用onhashchange方法代替。
2. 雖然支持history的pushState方法和window.onpopstate方法。可是按回退鍵，即發生history.back()的時候，不會觸發window.onpopstate方法。只會觸發hashchange事件。

瀏覽器對popstate事件的總體支持狀況：

1. history的pushState可操做瀏覽器歷史，而且改變當前頁面的URL。添加對應的url到歷史記錄裏。可是用pushState方法會產生歷史記錄，可用replaceState方法代替，不會產生額外的歷史記錄。
2. hashchange 和popstate事件 觸發的時候，hash已經改變了，沒法阻止默認行爲。即e.preventDefault()不起做用。
3. pushState()方法永遠不會觸發hashchange事件
4. popstate方法的觸發條件：

* 頁面前進、後退時觸發。
* Hashchange時觸發
5. 如何跳轉
* 若是history堆棧裏有pushState過，那麼就回跳到pushState所定的hash頁面。如window.history.pushState(‘object’, document.title, 「#explorer」);的#explorer頁面
* 沒有pushState過，就按照history的記錄進行回退和前進。

Iscroll插件問題

Iscroll插件被不少webapp應用中來實現列表滾動，設置translate屬性可使滾動更加順滑，可是在iscroll4.0中開啓了translate屬性後會致使滾動沒法手動中止，在問答社區中有人說iscroll5會解決這個問題，等iscroll5正式發佈後能夠嘗試一下。Iscroll在ios上表現很出色，可是在一些android手機，尤爲是低端機，性能不是很好，因此使用也要慎重。

資源分享（來自網絡）

推薦一個PPT可讓你全面瞭解HTML5：http://slides.html5rocks.com/

HTML部分包括你們已經熟知的HTML4.01 Standard http://www.w3.org/TR/html401/還有就是即將成爲Standard的 HTML 5 Candidate Recommendation http://www.w3.org/TR/html5/

HTML5 是在 HTML4的基礎上增長了更多的語義化標籤，好比：

<header>
<nav>
<section>
// 這有太多了，就不一一細說

而且在原有Tag上，擴展了更多的標記屬性，好比：

<input type="text" required />
<input type="email" value="some@email.com" />

HTML5除此以外，還引入了不少新的標籤和屬性，好比：WebApp開發方向的progress、無障礙瀏覽ARIA 、作SEO優化Microdata等等。

W3C HTML標準列表

CSS部分也是一樣的，你們已經熟知的CSS2 Standard

W3C最新的是CSS Level3 標準，因爲CSS3包含的內容很是多，文檔都是分開的，暫時沒辦法給出全部的標準地址，先貼一部分經常使用的標準吧：

W3C CSS標準列表

CSS Selector CSS選取器

Transition 動畫過渡效果

Animation 頁面動畫

JS部分對於HTML5來講主要體如今 Web API 方面，全部 API 都是 BOM對象，下面我也列出一些常見的標準地址：

W3C JavaScript API標準列表

Touch Events 觸摸手勢事件

Geolocation 地理位置

Web Storage Web存儲

經過上面的內容，大概已經瞭解HTML5是個什麼東西了，下面就來講說HTML5開發APP可使用的一些資源。其實HTML5開發與以往的Web並無本質的區別，主要差異體如今HTML5的一些新特性並無被老舊類庫很好的支持，這樣就須要一些更現代的類庫來使用HTML5作開發。

JS庫/框架

輕量級庫包括

Zepto.js 這個一個在移動端很好用的輕量級庫，很是小巧，可是功能也很簡單；

jQuery 2.0這裏說的是2.0之後的版本，僅支持一些高級瀏覽器，使用不少HTML5的特性，雖然在移動端開發體積相對zepto較大了些，可是做爲一個基礎庫來講確實使人愛不釋手；

App框架（下面的框架不只僅只能用來移動端開發）

jQuery Mobile 和jQuery是同樣的編程思想，使用起來很是方便，包含瀏覽歷史管理、視圖導航渲染、UI組件等功能；

App Framework與jQuery Mobile很是類似的一個框架，實際我也沒有使用過，看過了API，基本與jQuery Mobile相似；

Sencha Touch Sencha的產品，是徹底web組件化的思路，用來作企業應用開發很是的棒，可是，也有不少缺點，好比體積、複雜、性能等等；

MVC框架

Backbone MVC框架推薦Backbone，並非由於Backbone有多好，但對於移動端開發來講，Backbone的體積是相對小巧的，而且功能也十分簡單，很容易上手，AngularJS體積較大，相對要複雜一些；

UI框架

Bootsrap 3 ，用來構建HTML/CSS的；

Pure CSS 與Bootstrap同樣的東東；

工具庫（說到工具，實在是太多了，我沒辦法一一列出來，視乎到這的時候才離題主的問題近了一些）

iScroll 模擬區域滾動，在移動端開發中使用

pointer.js 觸摸手勢工具，用來兼容Pointer Event Model與Touch Event Model；

Deeptissue.js觸摸手勢工具，擴展各類手勢事件

QUO.js 同上

hammer.js 也是手勢工具，但這是一個jQuery plugin；

spin.js 加載中動畫小工具

css3patterns使用css3繪製背景

svgpatterns使用svg繪製背景

textillate.js各類文字動畫效果

Effeckt.css各類CSS3的動畫效果

JPlayer 音視頻播放工具