Mobile Web 開發之百味良藥

webapp實踐的總結:
It’s not a web app. It’s an app you install from the web.
當前 WEB APP 開發的最佳實踐

移動web佈局
移動Web單頁應用開發實踐——頁面結構化 flex模板
深刻了解 Flexbox 伸縮盒模型

viewport
此像素非彼像素

鎖定 viewport

ontouchmove="event.preventDefault()" //鎖定viewport，任何屏幕操做不移動用戶界面（彈出鍵盤除外）。

link與meta
1.桌面圖標

<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />

這個屬性是當用戶把鏈接保存到手機桌面時使用的圖標，若是不設置，則會用網頁的截圖。有了這，就可讓你的網頁像APP同樣存在手機裏了.

2.啓動畫面

<link rel="apple-touch-startup-image" href="/img/startup.png" />

這個是APP啓動畫面圖片，用途和上面的相似，若是不設置，啓動畫面就是白屏，圖片像素就是手機全屏的像素

3.時間信號欄

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

這個描述是表示打開的web app的最上面的時間、信號欄是黑色的，固然也能夠設置其它參數，詳細參數說明在：

Supported Meta Tags

4.全屏適配

<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />

這2個描述也頗有用的，若是沒有它，你的web app會用safari瀏覽器打開，有了它，就會用獨立進程的無地址欄的打開，徹底能夠和普通的APP比擬了

5.視網膜屏幕適配
下面還有個不錯的css，是用來區分視網膜屏幕的，這樣你能夠在iphone這樣的手機裏載入2x的圖片，就不會模糊了

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi)
{
#logo{background-image: url(logo@2x.png);}
}

字體
mac下網頁中文字體優化
橫豎屏會出現字體加粗不一致

禁止用戶選中文字

-webkit-user-select:none

dp、sp、px傻傻分不清楚
Pixel density, retina display and font-size in CSS

圖片(retina)
Using CSS Sprites to optimize your website for Retina Displays
使用CSS3的background-size優化蘋果的Retina屏幕的圖像顯示
使用css sprites來優化你的網站在Retina屏幕下顯示
CSS IMAGE SPRITES FOR RETINA (HIRES) DEVICES

點擊與click
對於a標記的點擊導航，默認是在onclick事件中處理的。而移動客戶端對onclick的響應相比PC瀏覽器有着明顯的幾百毫秒延遲。

在移動瀏覽器中對觸摸事件的響應順序應當是：

ontouchstart -> ontouchmove -> ontouchend -> onclick

所以，若是確實要加快對點擊事件的響應，就應當綁定ontouchend事件。

使用click會出現綁定點擊區域閃一下的狀況，解決：給該元素一個樣式以下

-webkit-tap-highlight-color: rgba(0,0,0,0);

若是不使用click，也不能簡單的用touchstart或touchend替代，須要用touchstart的模擬一個click事件，而且不能發生touchmove事件，或者用zepto中的tap（輕擊）事件。

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

動畫
動畫效果中，使用translate比使用定位性能高
Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

消除transition閃屏,兩個方法:

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

庫
zepto.js
zepto的一篇使用注意點講解
zepto的著名的tap「點透」bug
zepto源碼註釋
使用zeptojs內嵌到android webview影響正常滾動 ---去掉61行,其實就是使用原生的滾動
iscroll4
Iscroll4使用心得
運用webkit繪製渲染頁面原理解決iscroll4閃動的問題

工具
html5與css3技術應用評估
各類奇妙的hack
幾乎全部設備的屏幕尺寸與像素密度表
移動設備參數表
ios端移動設備參數速查
瀏覽器兼容表
移動設備查詢器
移動設備適配庫
viewport與設備尺寸在線檢測器
html5移動端兼容性速查
在線轉換字體
css3選擇器測試
兼容性速查表
瀏覽器的一些獨特參數
各類各樣的媒體查詢收集
css3動畫在線製做器
css3漸變在線製做器
移動端手勢表
webkit獨有的樣式分析

響應式測試工具
resize添加到收藏夾後，可直接在瀏覽器中出現各類分辨率的選擇工具來查看不一樣分辨率下的頁面效果
ScreenQueries
responsivepx
responsinator
resizeMyBrowser
quirktools screenfly

其餘
指尖上的js
移動Web產品前端開發口訣——「快」
移動Web開發，4行代碼檢測瀏覽器是否支持position:fixed
移動端web頁面使用position:fixed問題總結

reygreen1據mobileTech整理而成。