移動(dòng)端web開(kāi)發(fā)技巧匯總與經(jīng)驗(yàn)分享，已經(jīng)涵蓋了web移動(dòng)端開(kāi)發(fā)的方方面面，web移動(dòng)端開(kāi)發(fā)不可多得的干貨，值得一看。
meta標(biāo)簽，這些meta標(biāo)簽在開(kāi)發(fā)webapp時(shí)起到非常重要的作用
(1)<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” />
(2)<meta content=”yes” name=”apple-mobile-web-app-capable” />
(3)<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
(4)<meta content=”telephone=no” name=”format-detection” />
淘寶分類(lèi)目錄整理發(fā)布
第一個(gè)meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽；尤其要注意的是content里多個(gè)屬性的設(shè)置一定要用分號(hào)+空格來(lái)隔開(kāi)，如果不規(guī)范將不會(huì)起作用。
其中：
width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 允許用戶縮放到的最小比例
maximum-scale – 允許用戶縮放到的最大比例
user-scalable – 用戶是否可以手動(dòng)縮放
第二個(gè)meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；
第三個(gè)meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；
第四個(gè)meta標(biāo)簽表示：告訴設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼
在設(shè)置了initial-scale=1 之后，我們終于可以以1:1 的比例進(jìn)行頁(yè)面設(shè)計(jì)了。關(guān)于viewport，還有一個(gè)很重要的概念是：iphone 的safari 瀏覽器完全沒(méi)有滾動(dòng)條，而且不是簡(jiǎn)單的“隱藏滾動(dòng)條”，是根本沒(méi)有這個(gè)功能。iphone 的safari 瀏覽器實(shí)際上從一開(kāi)始就完整顯示了這個(gè)網(wǎng)頁(yè)，然后用viewport 查看其中的一部分。當(dāng)你用手指拖動(dòng)時(shí)，其實(shí)拖的不是頁(yè)面，而是viewport。瀏覽器行為的改變不止是滾動(dòng)條，交互事件也跟普通桌面不一樣。(請(qǐng)參考：指尖的下JS 系列文章)
點(diǎn)擊與click事件
對(duì)于a標(biāo)記的點(diǎn)擊導(dǎo)航，默認(rèn)是在onclick事件中處理的。而移動(dòng)客戶端對(duì)onclick的響應(yīng)相比PC瀏覽器有著明顯的幾百毫秒延遲。
在移動(dòng)瀏覽器中對(duì)觸摸事件的響應(yīng)順序應(yīng)當(dāng)是： ontouchstart -> ontouchmove -> ontouchend -> onclick
因此，如果確實(shí)要加快對(duì)點(diǎn)擊事件的響應(yīng)，就應(yīng)當(dāng)綁定ontouchend事件。
使用click會(huì)出現(xiàn)綁定點(diǎn)擊區(qū)域閃一下的情況，解決：給該元素一個(gè)樣式如下
-webkit-tap-highlight-color: rgba(0,0,0,0);
如果不使用click，也不能簡(jiǎn)單的用touchstart或touchend替代，需要用touchstart的模擬一個(gè)click事件，并且不能發(fā)生touchmove事件，或者用zepto中的tap（輕擊）事件。
body
{
-webkit-overflow-scrolling: touch;
}
用iphone或ipad瀏覽很長(zhǎng)的網(wǎng)頁(yè)滾動(dòng)時(shí)的滑動(dòng)效果很不錯(cuò)吧？不過(guò)如果是一個(gè)div，然后設(shè)置height:200px;overflow:auto;的話，可以滾動(dòng)但是完全沒(méi)有那滑動(dòng)效果，很郁悶吧？
我看到很多網(wǎng)站為了實(shí)現(xiàn)這一效果，用了第三方類(lèi)庫(kù)，最常用的是iscroll（包括新浪手機(jī)頁(yè)，百度等）我一開(kāi)始也使用，不過(guò)自從用了-webkit-overflow-scrolling: touch;樣式后，就完全可以拋棄第三方類(lèi)庫(kù)了，把它加在body{}區(qū)域，所有的overflow需要滾動(dòng)的都可以生效
了。
詳見(jiàn) http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ 頁(yè)面描述
<link rel="apple-touch-icon-precomposed" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" />
這個(gè)屬性是當(dāng)用戶把連接保存到手機(jī)桌面時(shí)使用的圖標(biāo)，如果不設(shè)置，則會(huì)用網(wǎng)頁(yè)的截圖。有了這，就可以讓你的網(wǎng)頁(yè)像APP一樣存在手機(jī)里了
<link rel="apple-touch-startup-image" href="/img/startup.png" />
這個(gè)是APP啟動(dòng)畫(huà)面圖片，用途和上面的類(lèi)似，如果不設(shè)置，啟動(dòng)畫(huà)面就是白屏，圖片像素就是手機(jī)全屏的像素
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
這個(gè)描述是表示打開(kāi)的web app的最上面的時(shí)間、信號(hào)欄是黑色的，當(dāng)然也可以設(shè)置其它參數(shù)，詳細(xì)參數(shù)說(shuō)明在：http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html里
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
這2個(gè)描述也很有用的，如果沒(méi)有它，你的web app會(huì)用safari瀏覽器打開(kāi)，有了它，就會(huì)用獨(dú)立進(jìn)程的無(wú)地址欄的打開(kāi)，完全可以和普通的APP比擬了
下面還有個(gè)不錯(cuò)的css，是用來(lái)區(qū)分視網(wǎng)膜屏幕的，這樣你可以在iphone這樣的手機(jī)里載入2x的圖片，就不會(huì)模糊了
@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);}
}
樣式表:
<link rel=”apple-touch-startup-image” href=”startup.png” /> // 設(shè)置開(kāi)始頁(yè)面圖片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在設(shè)置書(shū)簽的時(shí)候可以顯示好看的圖標(biāo)
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 肖像模式樣式
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css" // 風(fēng)景模式樣式
//豎屏?xí)r使用的樣式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
//橫屏?xí)r使用的樣式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>
事件 ： (請(qǐng)參考：指尖的下JS 系列文章http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html)
// 手勢(shì)事件
touchstart //當(dāng)手指接觸屏幕時(shí)觸發(fā)
touchmove //當(dāng)已經(jīng)接觸屏幕的手指開(kāi)始移動(dòng)后觸發(fā)
touchend //當(dāng)手指離開(kāi)屏幕時(shí)觸發(fā)
touchcancel
// 觸摸事件
gesturestart //當(dāng)兩個(gè)手指接觸屏幕時(shí)觸發(fā)
gesturechange //當(dāng)兩個(gè)手指接觸屏幕后開(kāi)始移動(dòng)時(shí)觸發(fā)
gestureend
// 屏幕旋轉(zhuǎn)事件
onorientationchange
// 檢測(cè)觸摸屏幕的手指何時(shí)改變方向
orientationchange
// touch事件支持的相關(guān)屬性
touches
targetTouches
changedTouches
clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX // Relative to the screen
screenY // Relative to the screen
pageX // Relative to the full page (includes scrolling)
pageY // Relative to the full page (includes scrolling)
target // Node the touch event originated from
identifier // An identifying number, unique to each touch event
屏幕旋轉(zhuǎn)事件：onorientationchange
添加屏幕旋轉(zhuǎn)事件偵聽(tīng)，可隨時(shí)發(fā)現(xiàn)屏幕旋轉(zhuǎn)狀態(tài)（左旋、右旋還是沒(méi)旋）。例子：
// 判斷屏幕是否旋轉(zhuǎn)
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("風(fēng)景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};<br>};
// 添加事件監(jiān)聽(tīng)
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
隱藏地址欄 & 處理事件的時(shí)候，防止?jié)L動(dòng)條出現(xiàn)：
// 隱藏地址欄 & 處理事件的時(shí)候 ，防止?jié)L動(dòng)條出現(xiàn)
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
雙手指滑動(dòng)事件：
// 雙手指滑動(dòng)事件
addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;},
false // 兼容各瀏覽器，表示在冒泡階段調(diào)用事件處理程序 (true 捕獲階段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; //對(duì) delta 值進(jìn)行判斷(比如正負(fù)) ，而后執(zhí)行相應(yīng)操作
return true;
};
判斷是否為iPhone：
// 判斷是否為 iPhone ：
function isAppleMobile() {
return (navigator.platform.indexOf('iPad') != -1);
};
localStorage:
例子 ：（注意數(shù)據(jù)名稱(chēng) n 要用引號(hào)引起來(lái)）
var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名稱(chēng)是 n 的數(shù)據(jù)存在 ，則將其讀出 ，賦予變量 v 。
localStorage.setItem('n', v); // 寫(xiě)入名稱(chēng)為 n、值為 v 的數(shù)據(jù)
localStorage.removeItem('n'); // 刪除名稱(chēng)為 n 的數(shù)據(jù)
使用特殊鏈接：
如果你關(guān)閉自動(dòng)識(shí)別后 ，又希望某些電話號(hào)碼能夠鏈接到 iPhone 的撥號(hào)功能 ，那么可以通過(guò)這樣來(lái)聲明電話鏈接 ,
<a href="tel:12345654321">打電話給我</a>
<a href="sms:12345654321">發(fā)短信</a>
或用于單元格：
<td onclick="location.href='tel:122'">
自動(dòng)大寫(xiě)與自動(dòng)修正
要關(guān)閉這兩項(xiàng)功能，可以通過(guò)autocapitalize 與autocorrect 這兩個(gè)選項(xiàng)：
<input type="text" autocapitalize="off" autocorrect="off" />
WebKit CSS:
①“盒模型”的具體描述性質(zhì)的包圍盒塊內(nèi)容，包括邊界，填充等等。
-webkit-border-bottom-left-radius: radius;
-webkit-border-top-left-radius: horizontal_radius vertical_radius;
-webkit-border-radius: radius; //容器圓角
-webkit-box-sizing: sizing_model; 邊框常量值：border-box/content-box
-webkit-box-shadow: hoff voff blur color; //容器陰影（參數(shù)分別為：水平X 方向偏移量；垂直Y 方向偏移量；高斯模糊半徑值；陰影顏色值）
-webkit-margin-bottom-collapse: collapse_behavior; 常量值：collapse/discard/separate
-webkit-margin-start: width;
-webkit-padding-start: width;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;
-webkit-appearance: push-button; //內(nèi)置的CSS 表現(xiàn)，暫時(shí)只支持push-button
②“視覺(jué)格式化模型”描述性質(zhì)，確定了位置和大小的塊元素。
direction: rtl
unicode-bidi: bidi-override; 常量：bidi-override/embed/normal
③“視覺(jué)效果”描述屬性，調(diào)整的視覺(jué)效果塊內(nèi)容，包括溢出行為，調(diào)整行為，能見(jiàn)度，動(dòng)畫(huà)，變換，和過(guò)渡。
clip: rect(10px, 5px, 10px, 5px)
resize: auto; 常量：auto/both/horizontal/none/vertical
visibility: visible; 常量: collapse/hidden/visible
-webkit-transition: opacity 1s linear; 動(dòng)畫(huà)效果 ease/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: visibler; 常量：visible(默認(rèn)值)/hidden
-webkit-box-reflect: right 1px; 鏡向反轉(zhuǎn)
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent), to(white));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));; //CSS 遮罩/蒙板效果
-webkit-mask-attachment: fixed; 常量：fixed/scroll
-webkit-perspective: value; 常量：none(默認(rèn))
-webkit-perspective-origin: left top;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d; 常量：flat/preserve-3d; (2D 與3D)
④“生成的內(nèi)容，自動(dòng)編號(hào)，并列出”描述屬性，允許您更改內(nèi)容的一個(gè)組成部分，創(chuàng)建自動(dòng)編號(hào)的章節(jié)和標(biāo)題，和操縱的風(fēng)格清單的內(nèi)容。
content: “Item” counter(section) ” “;
This resets the counter.
First section
>two section
three section
counter-increment: section 1;
counter-reset: section;
⑤“分頁(yè)媒體”描述性能與外觀的屬性，控制印刷版本的網(wǎng)頁(yè)，如分頁(yè)符的行為。
page-break-after: auto; 常量：always/auto/avoid/left/right
page-break-before: auto; 常量：always/auto/avoid/left/right
page-break-inside: auto; 常量：auto/avoid
⑥“顏色和背景”描述屬性控制背景下的塊級(jí)元素和顏色的文本內(nèi)容的組成部分。
-webkit-background-clip: content; 常量：border/content/padding/text
-webkit-background-origin: padding; 常量：border/content/padding/text
-webkit-background-size: 55px; 常量：length/length_x/length_y
⑦ “字型”的具體描述性質(zhì)的文字字體的選擇范圍內(nèi)的一個(gè)因素。報(bào)告還描述屬性用于下載字體定義。
unicode-range: U+00-FF, U+980-9FF;
⑧“文本”描述屬性的特定文字樣式，間距和自動(dòng)滾屏。
text-shadow: #00FFFC 10px 10px 5px;
text-transform: capitalize; 常量：capitalize/lowercase/none/uppercase
word-wrap: break-word; 常量：break-word/normal
-webkit-marquee: right large infinite normal 10s; 常量：direction(方向) increment(迭代次數(shù)) repetition(重復(fù)) style(樣式) speed(速度);
-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt: 1-n/infinite(無(wú)窮次)
-webkit-marquee-speed: fast/normal/slow
-webkit-marquee-style: alternate/none/scroll/slide
-webkit-text-fill-color: #ff6600; 常量：capitalize, lowercase, none, uppercase
-webkit-text-security: circle; 常量：circle/disc/none/square
-webkit-text-size-adjust: none; 常量:auto/none;
-webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; 常量：normal/after-white-space
-webkit-appearance: caps-lock-indicator;
-webkit-nbsp-mode: space; 常量： normal/space
-webkit-rtl-ordering: logical; 常量：visual/logical
-webkit-user-drag: element; 常量：element/auto/none
-webkit-user-modify: read- only; 常量：read-write-plaintext-only/read-write/read-only
-webkit-user-select: text; 常量：text/auto/none
⑨“表格”描述的布局和設(shè)計(jì)性能表的具體內(nèi)容。
-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
-webkit-column-break-after: right; 常量：always/auto/avoid/left/right
-webkit-column-break-before: right; 常量：always/auto/avoid/left/right
–webkit-column-break-inside: logical; 常量：avoid/auto
-webkit-column-count: 3; //分欄
-webkit-column-rule: 1px solid #fff;
style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid
⑩“用戶界面”描述屬性，涉及到用戶界面元素在瀏覽器中，如滾動(dòng)文字區(qū)，滾動(dòng)條，等等。報(bào)告還描述屬性，范圍以外的網(wǎng)頁(yè)內(nèi)容，如光標(biāo)的標(biāo)注樣式和顯示當(dāng)您按住觸摸觸摸
目標(biāo)，如在iPhone上的鏈接。
-webkit-box-align: baseline,center,end,start,stretch 常量：baseline/center/end/start/stretch
-webkit-box-direction: normal;常量：normal/reverse
-webkit-box-flex: flex_valuet
-webkit-box-flex-group: group_number
-webkit-box-lines: multiple; 常量：multiple/single
-webkit-box-ordinal-group: group_number
-webkit-box-orient: block-axis; 常量：block-axis/horizontal/inline-axis/vertical/orientation
–webkit-box-pack: alignment; 常量：center/end/justify/start
動(dòng)畫(huà)過(guò)渡：
這是 Webkit 中最具創(chuàng)新力的特性：使用過(guò)渡函數(shù)定義動(dòng)畫(huà)。
-webkit-animation: title infinite ease-in-out 3s;
animation 有這幾個(gè)屬性：
-webkit-animation-name： //屬性名，就是我們定義的keyframes
-webkit-animation-duration：3s //持續(xù)時(shí)間
-webkit-animation-timing-function： //過(guò)渡類(lèi)型：ease/ linear(線性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier
-webkit-animation-delay：10ms //動(dòng)畫(huà)延遲(默認(rèn)0)
-webkit-animation-iteration-count： //循環(huán)次數(shù)(默認(rèn)1)，infinite 為無(wú)限
-webkit-animation-direction： //動(dòng)畫(huà)方式：normal(默認(rèn) 正向播放)； alternate(交替方向，第偶數(shù)次正向播放，第奇數(shù)次反向播放)
這些同樣是可以簡(jiǎn)寫(xiě)的。但真正讓我覺(jué)的很爽的是keyframes，它能定義一個(gè)動(dòng)畫(huà)的轉(zhuǎn)變過(guò)程供調(diào)用，過(guò)程為0%到100%或from(0%)到to(100%)。簡(jiǎn)單點(diǎn)說(shuō)，只要你有想法，你想讓元素在這個(gè)過(guò)程中以什么樣的方式改變都是很簡(jiǎn)單的。
-webkit-transform: 類(lèi)型（縮放scale/旋轉(zhuǎn)rotate/傾斜skew/位移translate）
scale(num,num) 放大倍率。scaleX 和 scaleY(3)，可以簡(jiǎn)寫(xiě)為：scale(* , *)
rotate(*deg) 轉(zhuǎn)動(dòng)角度。rotateX 和 rotateY，可以簡(jiǎn)寫(xiě)為：rotate(* , *)
Skew(*deg) 傾斜角度。skewX 和skewY，可簡(jiǎn)寫(xiě)為：skew(* , *)
translate(*,*) 坐標(biāo)移動(dòng)。translateX 和translateY，可簡(jiǎn)寫(xiě)為：translate(* , *)。
實(shí)現(xiàn)模擬彈出消息框（Alert）的例子：
轉(zhuǎn)載請(qǐng)注明－原文鏈接：移動(dòng)端web開(kāi)發(fā)技巧與經(jīng)驗(yàn)分享
