mobileTech

<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問題總結

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

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

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

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

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 相關的知識也能夠參考

此像素非彼像素

移動 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須要滾動的均可以生效了。

頁面描述

<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" />

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

下面還有個不錯的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);}
}

鎖定 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 判斷設備的方法。

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

-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效果 */ }

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

如何實現打開已安裝的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';

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")

消除ie10裏面的那個叉號

IE Pseudo-elements

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

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

mac下網頁中文字體優化

UIWebView font is thinner in portrait than landscape

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

// 隱藏地址欄  & 處理事件的時候 ，防止滾動條出現
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

關於 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}

移動開發事件

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

手勢事件

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(* , *)。

常見的 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);
    }
}

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

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() {});事件自會後纔會渲染並顯示頁面。

移動瀏覽器篇

【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

庫的使用實踐

zepto.js

zepto的一篇使用注意點講解

zepto的著名的tap「點透」bug

zepto源碼註釋

使用zeptojs內嵌到android webview影響正常滾動時

https://github.com/madrobby/zepto/blob/master/src/touch.js 去掉61行,其實就是使用原生的滾動

iscroll4

iscroll4 的幾個bug(來自 http://www.mansonchor.com/blog/blog_detail_64.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要注意的問題

移動端字體問題

知乎專欄 - [無線手冊-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等配置項

PhoneGap 部分

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);  
    }

相關標籤/搜索

mobiletech

每日一句

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