移動技術資源

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 豎放加載
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">   // 橫放加載

//豎屏時使用的樣式
<style media="all and (orientation:portrait)" type="text/css">
    #landscape { display: none; }
</style>

//橫屏時使用的樣式
<style media="all and (orientation:landscape)" type="text/css">
    #portrait { display: none; }
</style>

Web app 開發的最佳實踐與中文總結

It’s not a web app. It’s an app you install from the web.

當前 WEB APP 開發的最佳實踐

來自maxzhang的一些移動端經驗總結乾貨

移動Web單頁應用開發實踐——頁面結構化

移動Web產品前端開發口訣——「快」

移動Web開發，4行代碼檢測瀏覽器是否支持position:fixed

使用border-image實現相似iOS7的1px底邊

移動端web頁面使用position:fixed問題總結

移動Web開發實踐——解決position:fixed自適應BUG

移動手機瀏覽器m3u8格式視頻流播放支持程度測試

本資料不少引用了指尖上的js系列

指尖下的js ——多觸式web前端開發之一：對於Touch的處理

指尖下的js ——多觸式web前端開發之二：處理簡單手勢

指尖下的js —— 多觸式web前端開發之三：處理複雜手勢

基礎知識

meta標籤

meta標籤，這些meta標籤在開發webapp時起到很是重要的做用

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；尤爲要注意的是content裏多個屬性的設置必定要用分號+空格來隔開，若是不規範將不會起做用。

注意根據 public_00 提供的資料補充，content 使用分號做爲分隔，在老的瀏覽器是支持的，但不是規範寫法。

規範的寫法應該是使用逗號分隔，參考 Safari HTML Reference – Supported Meta Tags 和 Android – Supporting Different Screens in Web Apps

其中：

width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 容許用戶縮放到的最小比例
maximum-scale – 容許用戶縮放到的最大比例
user-scalable – 用戶是否能夠手動縮放

第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼

在設置了initial-scale=1 以後，咱們終於能夠以1:1 的比例進行頁面設計了。關於viewport，還有一個很重要的概念是：iphone 的safari 瀏覽器徹底沒有滾動條，並且不是簡單的「隱藏滾動條」，是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網頁，而後用viewport 查看其中的一部分。當你用手指拖動時，其實拖的不是頁面，而是viewport。瀏覽器行爲的改變不止是滾動條，交互事件也跟普通桌面不同。 (請參考：指尖的下JS 系列文章)

更詳細的 viewport 相關的知識也能夠參考

此像素非彼像素

移動開發事件

手機瀏覽器經常使用手勢動做監聽封裝

手勢事件

touchstart //當手指接觸屏幕時觸發
touchmove //當已經接觸屏幕的手指開始移動後觸發
touchend //當手指離開屏幕時觸發
touchcancel

觸摸事件

gesturestart //當兩個手指接觸屏幕時觸發
gesturechange //當兩個手指接觸屏幕後開始移動時觸發
gestureend

屏幕旋轉事件

onorientationchange

檢測觸摸屏幕的手指什麼時候改變方向

orientationchange

touch事件支持的相關屬性

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
屏幕旋轉事件：onorientationchange

判斷屏幕是否旋轉

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("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
        　　break;
    };};

添加事件監聽

addEventListener('load', function(){
    orientationChange();
    window.onorientationchange = orientationChange;
});

雙手指滑動事件：

// 雙手指滑動事件
addEventListener('load',　　function(){ window.onmousewheel = twoFingerScroll;},
    false              // 兼容各瀏覽器，表示在冒泡階段調用事件處理程序 (true 捕獲階段)
);
function twoFingerScroll(ev) {
    var delta =ev.wheelDelta/120;              //對 delta 值進行判斷(好比正負) ，然後執行相應操做
    return true;
};

JS 單擊延遲

click 事件由於要等待單擊確認，會有 300ms 的延遲，體驗並非很好。

開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。

Creating Fast Buttons for Mobile Web Applications

Eliminate 300ms delay on click events in mobile Safari

WebKit CSS:

攜程 UED 整理的 Webkit CSS 文檔，全面、方便查詢，下面爲經常使用屬性。

①「盒模型」的具體描述性質的包圍盒塊內容，包括邊界，填充等等。

-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; //容器陰影（參數分別爲：水平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;   //內置的CSS 表現，暫時只支持push-button

②「視覺格式化模型」描述性質，肯定了位置和大小的塊元素。

direction: rtl
unicode-bidi: bidi-override; 常量：bidi-override/embed/normal

③「視覺效果」描述屬性，調整的視覺效果塊內容，包括溢出行爲，調整行爲，能見度，動畫，變換，和過渡。

clip: rect(10px, 5px, 10px, 5px)
resize: auto; 常量：auto/both/horizontal/none/vertical
visibility: visible; 常量: collapse/hidden/visible
-webkit-transition: opacity 1s linear; 動畫效果 ease/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: visibler; 常量：visible(默認值)/hidden
-webkit-box-reflect: right 1px; 鏡向反轉
-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(默認)
-webkit-perspective-origin: left top;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d; 常量：flat/preserve-3d; (2D 與3D)

④「生成的內容，自動編號，並列出」描述屬性，容許您更改內容的一個組成部分，建立自動編號的章節和標題，和操縱的風格清單的內容。

content: 「Item」 counter(section) 」 「;
This resets the counter.
First section
>two section
three section
counter-increment: section 1;
counter-reset: section;

⑤「分頁媒體」描述性能與外觀的屬性，控制印刷版本的網頁，如分頁符的行爲。

page-break-after: auto; 常量：always/auto/avoid/left/right
page-break-before: auto; 常量：always/auto/avoid/left/right
page-break-inside: auto; 常量：auto/avoid

⑥「顏色和背景」描述屬性控制背景下的塊級元素和顏色的文本內容的組成部分。

-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

⑦ 「字型」的具體描述性質的文字字體的選擇範圍內的一個因素。報告還描述屬性用於下載字體定義。

unicode-range: U+00-FF, U+980-9FF;

⑧「文本」描述屬性的特定文字樣式，間距和自動滾屏。

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(迭代次數) repetition(重複) style(樣式) speed(速度);
-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt: 1-n/infinite(無窮次)
-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

⑨「表格」描述的佈局和設計性能表的具體內容。

-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

⑩「用戶界面」描述屬性，涉及到用戶界面元素在瀏覽器中，如滾動文字區，滾動條，等等。報告還描述屬性，範圍之外的網頁內容，如光標的標註樣式和顯示當您按住觸摸觸摸目標，如在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

動畫過渡這是 Webkit 中最具創新力的特性：使用過渡函數定義動畫。

-webkit-animation: title infinite ease-in-out 3s;
animation 有這幾個屬性：
-webkit-animation-name： //屬性名，就是咱們定義的keyframes
-webkit-animation-duration：3s //持續時間
-webkit-animation-timing-function： //過渡類型：ease/ linear(線性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier
-webkit-animation-delay：10ms //動畫延遲(默認0)
-webkit-animation-iteration-count： //循環次數(默認1)，infinite 爲無限
-webkit-animation-direction： //動畫方式：normal(默認 正向播放)； alternate(交替方向，第偶數次正向播放，第奇數次反向播放)

這些一樣是能夠簡寫的。但真正讓我覺的很爽的是keyframes，它能定義一個動畫的轉變過程供調用，過程爲0%到100%或from(0%)到to(100%)。簡單點說，只要你有想法，你想讓元素在這個過程當中以什麼樣的方式改變都是很簡單的。

-webkit-transform: 類型（縮放scale/旋轉rotate/傾斜skew/位移translate）
scale(num,num) 放大倍率。scaleX 和 scaleY(3)，能夠簡寫爲：scale(* , *)
rotate(*deg) 轉動角度。rotateX 和 rotateY，能夠簡寫爲：rotate(* , *)
Skew(*deg) 傾斜角度。skewX 和skewY，可簡寫爲：skew(* , *)
translate(*,*) 座標移動。translateX 和translateY，可簡寫爲：translate(* , *)。

頁面描述

<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同樣存在手機裏了

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

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

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

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

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

常見的 iPhone 和 Android 屏幕參數。

設備分辨率設備像素比率
Android LDPI 320×240 0.75
Iphone 3 & Android MDPI 320×480 1
Android HDPI 480×800 1.5
Iphone 4 960×640 2.0

iPhone 4的一個 CSS 像素實際上表現爲一塊 2×2 的像素。因此圖片像是被放大2倍同樣，模糊不清晰。

解決辦法：

一、頁面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />

二、CSS文件裏

#header {
    background:url(mdpi/bg.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /*CSS for high-density screens*/
    #header {
        background:url(hdpi/bg.png);
    }
}

移動 Web 開發經驗技巧

點擊與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（輕擊）事件。

body
{
    -webkit-overflow-scrolling: touch;
}

用iphone或ipad瀏覽很長的網頁滾動時的滑動效果很不錯吧？不過若是是一個div，而後設置height:200px;overflow:auto;的話，能夠滾動可是徹底沒有那滑動效果，很鬱悶吧？

我看到不少網站爲了實現這一效果，用了第三方類庫，最經常使用的是iscroll（包括新浪手機頁，百度等）我一開始也使用，不過自從用了-webkit-overflow-scrolling: touch;樣式後，就徹底能夠拋棄第三方類庫了，把它加在body{}區域，全部的overflow須要滾動的均可以生效了。

鎖定 viewport

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

利用 Media Query監聽

Media Query 相信大部分人已經使用過了。其實 JavaScript能夠配合 Media Query這麼用：

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql); 
function handleOrientationChange(mql) {
  if (mql.matches) {
    alert('The device is currently in portrait orientation ')
  } else {
    alert('The device is currently in landscape orientation')
  }}

藉助了 Media Query 接口作的事件監聽，因此很強大！

也能夠經過獲取 CSS 值來使用 Media Query 判斷設備狀況，詳情請看：JavaScript 依據 CSS Media Queries 判斷設備的方法。

rem最佳實踐

rem是很是好用的一個屬性，能夠根據html來設定基準值，並且兼容性也很不錯。不過有的時候仍是須要對一些莫名其妙的瀏覽器優雅降級。如下是兩個實踐

http://jsbin.com/vaqexuge/4/edit 這有個demo，發現chrome當font-size小於12時，rem會按照12來計算。所以設置基準值要考慮這一點
能夠用如下的代碼片斷保證在低端瀏覽器下也不會出問題

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px / h1 { font-size: 24px; font-size: 2.4rem; } / =24px */

被點擊元素的外觀變化，可使用樣式來設定：

-webkit-tap-highlight-color: 顏色

檢測判斷 iPhone/iPod

開發特定設備的移動網站，首先要作的就是設備偵測了。下面是使用Javascript偵測iPhone/iPod的UA，而後轉向到專屬的URL。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
　　if (document.cookie.indexOf("iphone_redirect=false") == -1) {
　　　　window.location = "http://m.example.com";
　　}
}

雖然Javascript是能夠在水果設備上運行的，可是用戶仍是能夠禁用。它也會形成客戶端刷新和額外的數據傳輸，因此下面是服務器端偵測和轉向：

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
　　header('Location: http://yoursite.com/iphone');
　　exit();
}

阻止旋轉屏幕時自動調整字體大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

模擬:hover僞類

由於iPhone並無鼠標指針，因此沒有hover事件。那麼CSS :hover僞類就沒用了。可是iPhone有Touch事件，onTouchStart 相似 onMouseOver，onTouchEnd 相似 onMouseOut。因此咱們能夠用它來模擬hover。使用Javascript：

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
　　myLinks[i].addEventListener(’touchstart’, function(){this.className = 「hover」;}, false);
　　myLinks[i].addEventListener(’touchend’, function(){this.className = 「」;}, false);
}

而後用CSS增長hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

這樣設計一個連接，感受能夠更像按鈕。而且，這個模擬能夠用在任何元素上。

Flexbox 佈局

Flex 模板和實例

深刻了解 Flexbox 伸縮盒模型

CSS Flexbox Intro

http://www.w3.org/TR/css3-flexbox/

居中問題

居中是移動端跟pc端共同的噩夢。這裏有兩種兼容性比較好的新方案。

table佈局法

.box{ text-align:center; display:table-cell; vertical-align:middle; }
老版本flex佈局法

.box{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }

以上兩種其實分別是retchat跟ionic的佈局基石。

這裏有更詳細的更多的選擇http://www.zhouwenbin.com/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95/ 來自周文彬的博客

處理 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

input類型爲date狀況下不支持placeholder（來自於江水）

這實際上是瀏覽器本身的處理。由於瀏覽器會針對此類型 input 增長 datepicker 模塊。

對 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

解決方法：

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

由於text是支持placeholder的。所以當用戶focus的時候自動把type類型改變爲date，這樣既有placeholder也有datepicker了

Android上當viewport的width大於device-width時出現文字無端折行的解決辦法

http://www.iunbug.com/archives/2013/04/23/798.html

如何實現打開已安裝的app，若未安裝則引導用戶安裝?

來自 http://gallery.kissyui.com/redirectToNative/1.2/guide/index.html kissy mobile 經過iframe src發送請求打開app自定義url scheme，如taobao://home（淘寶首頁）、etao://scan（一淘掃描）); 若是安裝了客戶端則會直接喚起，直接喚起後，以前瀏覽器窗口（或者掃碼工具的webview）推入後臺；若是在指定的時間內客戶端沒有被喚起，則js重定向到app下載地址。大概實現代碼以下

goToNative:function(){

    if(!body) {
            setTimeout(function(){
                doc.body.appendChild(iframe);
            }, 0);
        } else {
            body.appendChild(iframe);
        }

setTimeout(function() {
            doc.body.removeChild(iframe);
            gotoDownload(startTime);//去下載，下載連接通常是itunes app store或者apk文件連接
            /**
             * 測試時間設置小於800ms時，在android下的UC瀏覽器會打開native app時並下載apk，
             * 測試android+UC下打開native的時間最好大於800ms;
             */
        }, 800);
}

須要注意的是若是是android chrome 25版本之後，在iframe src不會發送請求，緣由以下https://developers.google.com/chrome/mobile/docs/intents ，經過location href使用intent機制拉起客戶端可行而且當前頁面不跳轉。

window.location = 'intent://' + schemeUrl + '#Intent;scheme=' + scheme + ';package=' + self.package + ';end';

補充一個來自三水清的詳細講解http://js8.in/2013/12/16/ios%E4%BD%BF%E7%94%A8schema%E5%8D%8F%E8%AE%AE%E8%B0%83%E8%B5%B7app/

active的兼容(來自薛端陽)

今天發現，要讓a連接的CSS active僞類生效，只須要給這個a連接的touch系列的任意事件touchstart/touchend綁定一個空的匿名方法便可hack成功

<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=」asdasd」>asdasd</a>
<script>
var a=document.getElementsByTagName(‘a’);
for(var i=0;i<a.length;i++){
a[i].addEventListener(‘touchstart’,function(){},false);
}
</script>

消除transition閃屏

兩個方法：使用css3動畫的時儘可能利用3D加速，從而使得動畫變得流暢。動畫過程當中的動畫閃白能夠經過 backface-visibility 隱藏。

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

測試是否支持svg圖片

document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1")

考慮兼容「隱私模式」(fromhttp://blog.youyo.name/archives/smarty-phones-webapp-deverlop-advance.html)

ios的safari提供一種「隱私模式」，若是你的webapp考慮兼容這個模式，那麼在使用html5的本地存儲的一種————localStorage時，可能由於「隱私模式」下沒有權限讀寫localstorge而使代碼拋出錯誤，致使後續的js代碼都沒法運行了。

既然在safari的「隱私模式」下，沒有調用localStorage的權限，首先想到的是先判斷是否支持localStorage，代碼以下：

if('localStorage' in window){
    //須要使用localStorage的代碼寫在這
}else{
    //不支持的提示和向下兼容代碼
}

測試發現，即便在safari的「隱私模式」下，’localStorage’ in window的返回值依然爲true，也就是說，if代碼塊內部的代碼依然會運行，問題沒有獲得解決。接下來只能至關使用try catch了，雖然這是一個不太推薦被使用的方法，使用try catch捕獲錯誤，使後續的js代碼能夠繼續運行，代碼以下：

try{
    if('localStorage' in window){
         //須要使用localStorage的代碼寫在這
    }else{
         //不支持的提示和向下兼容代碼
    }
}catch(e){
    // 隱私模式相關提示代碼和不支持的提示和向下兼容代碼
}

因此，提醒你們注意，在須要兼容ios的safari的「隱私模式」的狀況下，本地存儲相關的代碼須要使用try catch包裹並降級兼容。

安卓手機點擊鎖定頁面效果問題

有些安卓手機，頁面點擊時會中止頁面的javascript，css3動畫等的執行，這個比較蛋疼。不過能夠用阻止默認事件解決。詳細見 http://stackoverflow.com/questions/10246305/android-browser-touch-events-stop-display-being-updated-inc-canvas-elements-h

function touchHandlerDummy(e)
{
    e.preventDefault();
    return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
document.addEventListener("touchmove", touchHandlerDummy, false);
document.addEventListener("touchend", touchHandlerDummy, false);

消除ie10裏面的那個叉號

IE Pseudo-elements

input:-ms-clear{display:none;}

關於ios與os端字體的優化(橫豎屏會出現字體加粗不一致等)

mac下網頁中文字體優化

UIWebView font is thinner in portrait than landscape

判斷用戶是不是「將網頁添加到主屏後，再從主屏幕打開這個網頁」的

navigator.standalone

隱藏地址欄 & 處理事件的時候，防止滾動條出現：

// 隱藏地址欄  & 處理事件的時候 ，防止滾動條出現
addEventListener('load', function(){
        setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

判斷是否爲iPhone：

// 判斷是否爲 iPhone ：
function isAppleMobile() {
    return (navigator.platform.indexOf('iPad') != -1);
};

localStorage:

var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";   // 若是名稱是  n 的數據存在 ，則將其讀出 ，賦予變量  v  。
localStorage.setItem('n', v);                                           // 寫入名稱爲 n、值爲  v  的數據
localStorage.removeItem('n');        // 刪除名稱爲  n  的數據

使用特殊連接：

若是你關閉自動識別後，又但願某些電話號碼可以連接到 iPhone 的撥號功能，那麼能夠經過這樣來聲明電話連接 ,

<a href="tel:12345654321">打電話給我</a>
<a href="sms:12345654321">發短信</a>

或用於單元格：

<td onclick="location.href='tel:122'">

自動大寫與自動修正

要關閉這兩項功能，能夠經過autocapitalize 與autocorrect 這兩個選項：

<input type="text" autocapitalize="off" autocorrect="off" />

不讓 Android 識別郵箱

<meta content="email=no" name="format-detection" />

禁止 iOS 彈出各類操做窗口

-webkit-touch-callout:none

禁止用戶選中文字

-webkit-user-select:none

動畫效果中，使用 translate 比使用定位性能高

Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

拿到滾動條

window.scrollY
window.scrollX

好比要綁定一個touchmove的事件，正常的狀況下相似這樣(來自呼吸二氧化碳)

$('div').on('touchmove', function(){
//.….code
{});

而若是中間的code須要處理的東西多的話，fps就會降低影響程序順滑度，而若是改爲這樣

$('div').on('touchmove', function(){
setTimeout(function(){
//.….code
},0);
{});

把代碼放在setTimeout中，會發現程序變快.

關於 iOS 系統中，Web APP 啓動圖片在不一樣設備上的適應性設置

http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad/10011893#10011893

position:sticky與position:fixed佈局

http://www.zhouwenbin.com/positionsticky-%E7%B2%98%E6%80%A7%E5%B8%83%E5%B1%80/http://www.zhouwenbin.com/sticky%E6%A8%A1%E6%8B%9F%E9%97%AE%E9%A2%98/

關於 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/ 注意，該屬性會致使中文不能輸入詞組，只能單個字。感謝鬼哥與飛（遊勇飛）貢獻此問題與解決方案

另外，在position:fixed後的元素裏，儘可能不要使用輸入框。更多的bug可參考http://www.cosdiv.com/page/M0/S882/882353.html

依舊沒法解決（摩托羅拉ME863手機），則使用input:text類型而非password類型，並設置其設置 -webkit-text-security: disc; 隱藏輸入密碼從而解決。

JS動態生成的select下拉菜單在Android2.x版本的默認瀏覽器裏不起做用

解決方法刪除了overflow-x:hidden; 而後在JS生成下來菜單以後focus聚焦，這兩步操做以後解決了問題。(來自島都-小Qi)

參考http://stackoverflow.com/questions/4697908/html-select-control-disabled-in-android-webview-in-emulator

Andriod 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

IE10 的特殊鼠標事件

IE10 事件監聽

iOS 輸入框最佳實踐

Mobile-friendly input of a digits + spaces string (a credit card number)

HTML5 input type number vs tel

iPhone: numeric keyboard for text input

Text Programming Guide for iOS – Managing the Keyboard

HTML5 inputs and attribute support

往返緩存問題

點擊瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返緩存(bfcache)有關係。有不少hack的處理方法，能夠參考

http://stackoverflow.com/questions/24046/the-safari-back-button-problem

http://stackoverflow.com/questions/11979156/mobile-safari-back-button

不暫停的計時器

https://www.imququ.com/post/ios-none-freeze-timer.html 還有一種利用work的方式，在寫ing。。

如何讓音頻跟視頻在ios跟android上自動播放

<audio autoplay ><source  src="audio/alarm1.mp3" type="audio/mpeg"></audio>

系統默認狀況下 audio的autoplay屬性是沒法生效的，這也是手機爲節省用戶流量作的考慮。若是必需要自動播放，有兩種方式能夠解決。

1.捕捉一次用戶輸入後，讓音頻加載，下次便可播放。

//play and pause it once
document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

這種方法須要捕獲一次用戶的點擊事件來促使音頻跟視頻加載。當加載後，你就能夠用javascript控制音頻的播放了，如調用audio.play()

2.利用iframe加載資源

var ifr=document.createElement("iframe");
ifr.setAttribute('src', "http://mysite.com/myvideo.mp4");
ifr.setAttribute('width', '1px');
ifr.setAttribute('height', '1px');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr);

這種方式其實跟第一種原理是同樣的。當資源加載了你就能夠控制播放了，可是這裏使用iframe來加載，至關於直接觸發資源加載。注意，使用建立audio標籤並讓其加載的方式是不可行的。慎用這種方法，會對用戶形成很糟糕的影響。。

iOS 6 跟 iPhone 5 的那些事

IP5 的媒體查詢

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {

/* iPhone 5 or iPod Touch 5th generation */

}

使用媒體查詢，提供不一樣的啓動圖片：

<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

拍照上傳

<input type=file accept="video/*">
<input type=file accept="image/*">

不支持其餘類型的文件，如音頻，Pages文檔或PDF文件。也沒有getUserMedia攝像頭的實時流媒體支持。

可使用的 HTML5 高級 api

multipart POST 表單提交上傳
XMLHttpRequest 2 AJAX 上傳（甚至進度支持）
文件 API ，在 iOS 6 容許 JavaScript 直接讀取的字節數和客戶端操做文件。

智能應用程序橫幅

有了智能應用程序橫幅，當網站上有一個相關聯的本機應用程序時，Safari瀏覽器能夠顯示一個橫幅。若是用戶沒有安裝這個應用程序將顯示「安裝」按鈕，或已經安裝的顯示「查看」按鈕可打開它。

在 iTunes Link Maker 搜索咱們的應用程序和應用程序ID。

<meta name="apple-itunes-app" content="app-id=9999999">

可使用 app-argument 提供字符串值，若是參加iTunes聯盟計劃，能夠添加元標記數據

<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">

<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">

橫幅須要156像素（設備是312 hi-dpi）在頂部，直到用戶在下方點擊內容或關閉按鈕，你的網站纔會展示所有的高度。它就像HTML的DOM對象，但它不是一個真正的DOM。

CSS3 濾鏡

-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);

交叉淡變

background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

Safari中的全屏幕

除了chrome-less 主屏幕meta標籤，如今的iPhone和iPod Touch（而不是在iPad）支持全屏幕模式的窗口。沒有辦法強制全屏模式，它須要由用戶啓動（工具欄上的最後一個圖標）。須要引導用戶按下屏幕上的全屏圖標來激活全屏效果。可使用onresize事件檢測是否用戶切換到全屏幕。

支持requestAnimationFrameAPI

支持image-set,retina屏幕的利器

-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)

應用程序緩存限制增長至25MB。

Web View（pseudobrowsers，PhoneGap/Cordova應用程序，嵌入式瀏覽器）上Javascript運行比Safari慢3.3倍（或者說，Nitro引擎在Safari瀏覽器是Web應用程序是3.3倍速度）。

autocomplete屬性的輸入遵循DOM規範

來自DOM4的Mutation Observers已經實現。您可使用WebKitMutationObserver構造器捕獲DOM的變化

Safari再也不老是對用 -webkit-transform:preserve-3d 的元素建立硬件加速

支持window.selection 的Selection API

Canvas更新：createImageData有一個參數，如今有兩個新的功能作好準備，用webkitGetImageDataHD和webkitPutImageDataHD提供高分辨率圖像。

更新SVG處理器和事件構造函數

IOS7的大更新

iOS 7 的 Safari 和 HTML5：問題，變化和新 API(張金龍翻譯)

iOS 7 的一些坑(英文)

ios7的一些坑2(英文)

webview相關

Cache開啓和設置

browser.getSettings().setAppCacheEnabled(true);
browser.getSettings().setAppCachePath("/data/data/[com.packagename]/cache");
browser.getSettings().setAppCacheMaxSize(5*1024*1024); // 5MB

LocalStorage相關設置

browser.getSettings().setDatabaseEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
String databasePath = browser.getContext().getDir("databases", Context.MODE_PRIVATE).getPath();
browser.getSettings().setDatabasePath(databasePath);//Android　webview的LocalStorage有個問題，關閉APP或者重啓後，就清楚了，因此須要browser.getSettings().setDatabase相關的操做，把LocalStoarge存到DB中

myWebView.setWebChromeClient(new WebChromeClient(){
　　　 @Override
　　　 public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater)
　　　 {
　　　　　　　 quotaUpdater.updateQuota(estimatedSize * 2);
　　　 }
}

瀏覽器自帶縮放按鈕取消顯示

browser.getSettings().setBuiltInZoomControls(false);

幾個比較好的實踐

使用localstorage緩存html

使用lazyload，還要記得lazyload佔位圖雖然小，可是最好能提早加載到緩存

延時加載執行js

主要緣由就在於Android Webview的onPageFinished事件，Android端通常是用這個事件來標識頁面加載完成並顯示的，也就是說在此以前，會一直loading，可是Android的OnPageFinished事件會在Javascript腳本執行完成以後纔會觸發。若是在頁面中使用JQuery，會在處理完DOM對象，執行完$(document).ready(function() {});事件自會後纔會渲染並顯示頁面。

移動端調適篇

手機抓包與配host

在PC上，咱們能夠很方便地配host，可是手機上如何配host，這是一個問題。

這裏主要使用fiddler和遠程代理，實現手機配host的操做，具體操做以下：

首先，保證PC和移動設備在同一個局域網下；

PC上開啓fiddler，並在設置中勾選「allow remote computers to connect」

首先，保證PC和移動設備在同一個局域網下；
PC上開啓fiddler，並在設置中勾選「allow remote computers to connect」
手機上設置代理，代理IP爲PC的IP地址，端口爲8888（這是fiddler的默認端口）。一般手機上能夠直接設置代理，若是沒有，能夠去下載一個叫ProxyDroid的APP來實現代理的設置。
此時你會發現，用手機上網，走的實際上是PC上的fiddler，全部的請求包都會在fiddler中列出來，配合willow使用，便可實現配host，甚至是反向代理的操做。

也能夠用CCProxy之類軟件，還有一種方法就是買一個隨身wifi，而後手機鏈接就能夠了！

高級抓包

iPhone上使用Burp Suite捕捉HTTPS通訊包方法

mobile app 通訊分析方法小議（iOS/Android)

實時抓取移動設備上的通訊包(ADVsock2pipe+Wireshark+nc+tcpdump)

靜態資源緩存問題

通常用代理軟件代理過來的靜態資源能夠設置nocache避免緩存，可是有的手機比較詭異，會一直緩存住css等資源文件。因爲靜態資源通常都是用版本號管理的，咱們以charles爲例子來處理這個問題

charles 選擇靜態的html頁面文件-saveResponse。以後把這個文件保存一下，修改一下版本號。以後繼續發請求，剛纔的html頁面文件右鍵選擇 –map local 選擇咱們修改過版本號的html文件即ok。這其實也是fiddler遠程映射並修改文件的一個應用場景。

移動瀏覽器篇

微信瀏覽器

由於微信瀏覽器屏蔽了一部分連接圖片，因此須要引導用戶去打開新頁面，能夠用如下方式判斷微信瀏覽器的ua

function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

後端判斷也很簡單，好比php

function is_weixin(){
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
            return true;
    }  
    return false;
}

【UC瀏覽器】video標籤脫離文檔流

場景：標籤的父元素(祖輩元素)設置transform樣式後，標籤會脫離文檔流。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zj3xiyu

解決方案：不使用transform屬性。translate用top、margin等屬性替代。

【UC瀏覽器】video標籤總在最前

場景：標籤老是在最前（能夠理解爲video標籤的z-index屬性是Max）。

測試環境：UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現象

場景：設置了position: fixed 的元素會遮擋z-index值更高的同輩元素。

　　　在8.6的版本,這個狀況直接出現。

　　　在8.7以後的版本,當同輩元素的height大於713這個「神奇」的數值時,纔會被遮擋。

測試環境：UC瀏覽器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zYLTSg6

【QQ手機瀏覽器】不支持HttpOnly

場景：帶有HttpOnly屬性的Cookie，在QQ手機瀏覽器版本從4.0開始失效。JavaScript能夠直接讀取設置了HttpOnly的Cookie值。

測試環境：QQ手機瀏覽器 4.0/4.1/4.2 + Android 4.0 。

【MIUI原生瀏覽器】瀏覽器地址欄hash不改變

場景：location.hash 被賦值後，地址欄的地址不會改變。

　　　但實際上 location.href 已經更新了，經過JavaScript能夠順利獲取到更新後的地址。

　　　雖然不影響正常訪問，但用戶沒法將訪問過程當中改變hash後的地址存爲書籤。

測試環境：MIUI 4.0

【Chrome Mobile】fixed元素沒法點擊

場景：父元素設置position: fixed;

　　　子元素設置position: absolute;

　　　此時，若是父元素/子元素還設置了overflow: hidden 則出現「父元素遮擋該子元素「的bug。

　　　視覺(view)層並無出現遮擋，只是沒法觸發綁定在該子元素上的事件。可理解爲：「看到點不到」。

補充：頁面往下滾動，觸發position: fixed;的特性時，纔會出現這個bug，在最頂不會出現。

測試平臺：小米1S，Android4.0的Chrome18

demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解決辦法：把父元素和子元素的overflow: hidden去掉。

以上來源於 http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html

庫的使用實踐

1.滾動容器點擊input框、select等表單元素時沒有響應】

onBeforeScrollStart: function (e) { e.preventDefault(); }

改成

onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget © e.explicitOriginalTarget.nodeName.toLowerCase():(e.target © e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }

2.往iscroll容器內添加內容時，容器閃動的bug

源代碼的

has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()

改爲

has3d = false

在配置iscroll時，useTransition設置成false

3.過長的滾動內容，致使卡頓和app直接閃退

不要使用checkDOMChanges。雖然checkDOMChanges很方便，定時檢測容器長度是否變化來refresh，但這也意味着你要消耗一個Interval的內存空間
隱藏iscroll滾動條，配置時設置hScrollbar和vScrollbar爲false。
不得已的狀況下，去掉各類效果，momentum、useTransform、useTransition都設置爲false

4.左右滾動時，不能正確響應正文上下拉動

iscroll的閃動問題也與渲染有關係，能夠參考運用webkit繪製渲染頁面原理解決iscroll4閃動的問題 iscroll4升級到5要注意的問題

iscroll或者滾動類框架滾動時不點擊的方法

可使用如下的解決方案(利用data-setapi)

<a ontouchmove="this.s=1" ontouchend="this.s || window.open(this.dataset.href),this.s=0" target="_blank" data-href="http://www.hao123.com/topic/pig">黃浦江死豬之謎</a>

也能夠用這種方法

$(document).delegate('[data-target]', 'touchmove', function () {
        $(this).attr('moving','moving');

    })


    $(document).delegate('[data-target]', 'touchend', function () {
        if ($(this).attr('moving') !== 'moving') {
         //作你想作的。。
            $(this).attr('moving', 'notMoving');
        } else {
            $(this).attr('moving', 'notMoving');
        }

    })

移動端字體問題

知乎專欄 – [無線手冊-4] dp、sp、px傻傻分不清楚[完整]

Resolution Independent Mobile UI

Pixel density, retina display and font-size in CSS

Device pixel density tests

跨域問題

手機瀏覽器也是瀏覽器，在ajax調用外部api的時候也存在跨域問題。固然利用 PhoneGap 打包後，因爲協議不同就不存在跨域問題了。但頁面一般是須要跟後端進行調試的。通常會報相似

XMLHttpRequest cannot load XXX
Origin null is not allowed by Access-Control-Allow-Origin.

以及

XMLHttpRequest cannot load http://. Request header field Content-Type is not allowed by Access-Control-Allow-Headers."

這時候可讓後端加上兩個http頭

Access-Control-Allow-Origin "*"
Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

第一個頭能夠避免跨域問題，第二個頭能夠方便ajax請求設置content-type等配置項

這個會存在一些安全問題，能夠參考這個問題的討論 http://www.zhihu.com/question/22992229

PhoneGap 部分

http://snoopyxdy.blog.163.com/blog/static/60117440201432491123551 這裏有一大堆snoopy總結的phonggap開發坑

Should not happen: no rect-based-test nodes found

在 Android 項目中的 assets 中的 HTML 頁面中加入如下代碼，即可解決問題

window,html,body{
    overflow-x:hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overflow: scroll !important;
}

參考：

http://stackoverflow.com/questions/12090899/android-webview-jellybean-should-not-happen-no-rect-based-test-nodes-found

拿聯繫人的時候報 ContactFindOptions is not defined

出現這個問題多是由於 Navigator 取 contacts 時綁定的 window.onload

注意使用 PhoneGap 的 API 時，必定要在 devicereay 事件的處理函數中使用 API

document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {    
        callFetchContacts();
    }

function callFetchContacts(){
    var options = new ContactFindOptions();
    options.multiple = true;
    var fields       = ["displayName", "name","phoneNumbers"];
    navigator.contacts.find(fields, onSuccess, onError,options);  
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。