mobileHack

這裡收集了許多移動端上遇到的各種坑與相對解決方案

1.問題：手機端 click 事件會有大約 300ms 的延遲

原因：手機端事件 touchstart –> touchmove –> touchend or touchcancel –> click，因為在touch事件觸發之後，瀏覽器要判斷使用者是否會做出雙擊螢幕的操作，所以會等待300ms來判斷，再做出是否觸發click事件的處理，所以就會有300ms的延遲

解決方法：使用touch事件來代替click事件，如 zepto.js 的tap事件和fastClick，還有我自己也寫了個移動端手勢操作庫mTouch，都有相應的事件可以代替click事件解決這個問題

2.問題：在部分機型下（如小米4、小米2s、中興） body 設定的 font-size 是用 rem 單位的話，若其他元素沒有設定font-size，該font-size值繼承於body，則會很高概率出現字型異常變大的情況

原因：估計是跟app的webview預設設定有關，body的font-size使用rem單位，就是相對於當前根節點的font-size來確定的，可能在某些webview的設定下，body用的是webview設定的預設字型大小，因為在我給html設定了一個px單位的預設font-size時，還是會出現字型異常變大的情況，具體webview的一些細節就沒有再研究了

解決方法：body設定一個px單位的預設font-size值，不用rem，或者給字型會異常變大的元素設定一個px單位的font-size值 
3.問題：使用zepto的 tap 事件時會出現“點透”bug，比如：一個元素A綁定了tap事件，緊跟其後的元素B綁定了click事件，A觸發tap事件時將自己remove掉，B就會自動“掉”到A的位置，接下來就是不正常的情況，因為這個時候B的click事件也觸發了

原因：因為tap事件是通過 touchstart 、touchmove 、 touchend 這三個事件來模擬實現的，在手機端事件機制中，觸發touch事件後會緊接著觸發touch事件座標元素的click事件，因為B元素在300ms內剛好“掉”回來A的位置，所以就觸發了B的click事件，還有zepto的tap事件都是代理到body的，所以想通過e.preventDefault()阻止預設行為也是不可行的

解決方法：（1）A元素換成click事件；（2）使用我寫的庫 mTouch 來給A繫結tap事件，然後在事件回撥中通過e.preventDefault()來阻止預設行為，或者換用其他的支援tap事件的庫

問題、4.動畫

動畫有很多種，比如側邊欄選單的滑入滑出、元素的響應動畫、頁面切換之間的過場等等，在H5之下的眾多實現方法都沒有辦法達到純原生的效能。一般這些的話有幾種不同的選擇：CSS3動畫，JavaScript動畫，原生動畫。css3動畫非常的消耗效能，如果某一個元素用到css3動畫可能還看不出來，但大面積或過場使用css3動畫會讓app低端手機體驗非常差。最好的選擇一般是通過框架呼叫底層的動畫，但不管怎麼樣等於在原來的程式碼上包上了一層，效能還是不可避免的受到影響。比如在一個新頁面的載入上，如果呼叫底層動畫要考慮的問題有兩個，一個是本身資源頁面的渲染問題，另一個是遠端資料的獲取。即便是這些動畫能夠很快的響應，但大量的css頁面會導致渲染卡頓，滑入時可能會有白屏/機器卡頓的現象。為了解決這些效能問題又必須要用到預載入或模擬動畫。即便是這樣，滑入滑出的動畫在低端的安卓機器上還是有很多問題，如果獲取服務端資料處理的方式不合適，卡頓白屏的現象會更嚴重。具體看下面的資料獲取方式。

問題、5.獲取服務端資料

首先要接受的是，這裡的資料獲取都是在資源頁面上非同步完成的，因為只有這樣才能讓這些資源頁面完成預載入或者渲染。但是非同步拿到的資料在填入頁面中時可能會涉及DOM操作，眾所周知，DOM操作非常消耗效能，如果頁面小還好，頁面稍大資料稍微複雜一點，頻繁的DOM操作會導致明顯的閃白。而且最重要的一點是，如果頁面載入進來之後資料更新的速度太慢，也會讓頁面模板等待很長時間，對使用者體驗又不友好，總不能每次開啟都像瀏覽器一樣等待重新整理是吧。這個問題如果沒有得到解決，H5APP是很難承擔大規模資料的頁面，在它們之中頻繁切換更是難上加難，那麼肯定有人也會想到用MVVM的方式，其實我也寫過一些基於MVVM的H5APP，相對來說它們獲取資料和更新資料的方式更敏捷更科學，但寫的過程中又要注意很多H5獨有的問題，這些問題在下面的頁面切換裡來講。

一些有用技能點

通過設定css屬性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手機端webkit瀏覽器 點選按鈕或超連結之類的 預設灰色背景色 
設定css屬性 -webkit-user-select:none; 控制使用者不可選擇文字 
區域性 overflow: scroll | auto 滾動時使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）

工具類網站

iphone6的那些事

響應式測試工具

Firefox 瀏覽器內建了 自定義設計檢視 的功能，可以通過 Firefox->Web 開發者->自定義設計檢視（或者摁下 Shift + Ctrl + m ）。相比網路工具，執行更加流暢，無需聯網。

媒體查詢常用樣式表：

    <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 開發的最佳實踐與中文總結

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

本資料很多引用了指尖上的js系列

基礎知識

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

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

第一個meta標籤表示：強制讓文件的寬度與裝置的寬度保持1:1，並且文件最大的寬度比例是1.0，且不允許使用者點選螢幕放大瀏覽； 
尤其要注意的是content裡多個屬性的設定一定要用分號+空格來隔開，如果不規範將不會起作用。

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

其中：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

JS 單擊延遲

click 事件因為要等待單擊確認，會有 300ms 的延遲，體驗並不是很好。

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

WebKit CSS:

①“盒模型”的具體描述性質的包圍盒塊內容，包括邊界，填充等等。 
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" />

<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倍一樣，模糊不清晰。

解決辦法：

1、頁面引用

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

2、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 介面做的事件監聽，所以很強大！

rem最佳實踐

rem是非常好用的一個屬性，可以根據html來設定基準值，而且相容性也很不錯。不過有的時候還是需要對一些莫名其妙的瀏覽器優雅降級。以下是兩個實踐

1. http://jsbin.com/vaqexuge/4/edit 這有個demo，發現chrome當font-size小於12時，rem會按照12來計算。因此設定基準值要考慮這一點

2. 可以用以下的程式碼片段保證在低端瀏覽器下也不會出問題

   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 佈局

居中問題

居中是移動端跟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的佈局基石。

移動端實現標題文字截斷

處理 Retina 雙倍螢幕

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了

判斷照片的橫豎排列

有這樣一種需求，需要判斷使用者照片是橫著拍出來的還是豎著拍出來的，這裡需要使用照片得exif資訊：

$("input").change(function() {
    var file = this.files[0];
    fr   = new FileReader;

    fr.onloadend = function() {
        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
        alert(exif.Orientation);
    };

    fr.readAsBinaryString(file);
});

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

白屏解決與優化方案

當前很多無線頁面都使用前端模板進行資料渲染，那麼在糟糕的網速情況下，一進去頁面，看到的不是白屏就是 loading，這成為白屏問題。

此問題發生的原因基本可以歸結為網速跟靜態資源

1、css檔案載入需要一些時間，在載入的過程中頁面是空白的。 解決：可以考慮將css程式碼前置和內聯。 
2、首屏無實際的資料內容，等待非同步載入資料再渲染頁面導致白屏。 解決：在首屏直接同步渲染html，後續的滾屏等再採用非同步請求資料和渲染html。 
3、首屏內聯js的執行會阻塞頁面的渲染。 解決：儘量不在首屏html程式碼中放置內聯指令碼。（來自翔歌）

解決方案

根本原因是客戶端渲染的無力，因此最簡單的方法是在伺服器端，使用模板引擎渲染所有頁面。同時

1減少檔案載入體積，如html壓縮，js壓縮 
2加快js執行速度 比如常見的無限滾動的頁面，可以使用js先渲染一個螢幕範圍內的東西 
3提供一些友好的互動，比如提供一些假的滾動條 
4使用本地儲存處理靜態檔案。

如何實現開啟已安裝的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")

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包裹並降級相容。

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

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

消除ie10裡面的那個叉號

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

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

判斷使用者是否是“將網頁新增到主屏後，再從主螢幕開啟這個網頁”的

navigator.standalone

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

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

ios7 可以通過meta標籤的minimal來隱藏位址列了

判斷是否為iPhone：

// 判斷是否為 iPhone ：
function isAppleMobile() {
    return (navigator.platform.indexOf('iPhone') != -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 比使用定位效能高

拿到滾動條

window.scrollY
window.scrollX

比如要繫結一個touchmove的事件，正常的情況下類似這樣(來自呼吸二氧化碳)

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

而如果中間的code需要處理的東西多的話，fps就會下降影響程式順滑度，而如果改成這樣

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

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

關於 iOS 系統中，Web APP 啟動圖片在不同裝置上的適應性設定

position:sticky與position:fixed佈局

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

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

JS動態生成的select下拉選單在Android2.x版本的預設瀏覽器裡不起作用

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

Andriod 上去掉語音輸入按鈕

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

IE10 的特殊滑鼠事件

iOS 輸入框最佳實踐

往返快取問題

點選瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返快取(bfcache)有關係。有很多hack的處理方法，可以參考

不暫停的計時器（safari的程序凍結）

    // 解決ios safari tab在後臺會遭遇程序凍結問題
    // http://www.apple.com/safari/#gallery-icloud-tabs
    // Safari takes advantage of power-saving technologies such as App Nap, which puts background Safari tabs into a low-power state until you start using them again. In addition, Safari Power Saver conserves battery life by intelligently pausing web videos and other plug‑in content when they’re not front and center on the web pages you visit. All told, Safari on OS X Mavericks lets you browse up to an hour longer than with Chrome or Firefox.1
    var work;
    function startWorker() {
        if (typeof(Worker) !== "undefined") {
            if (typeof(work) == "undefined") {
                work = new Worker("/workers.js");
            }
            work.onmessage = function(event) {
                // document.getElementById("result-count").innerHTML = event.data.count;
                // document.getElementById("result-url").innerHTML = event.data.targetURL;
                if (target && event.data.targetURL != "") target.location.href = event.data.targetURL;
            };
        } else {
            console.log('does not support Web Workers...');
        }
    }

    function stopWorker() {
        work.terminate();
    }

    startWorker();

worker:

// 解決ios safari tab在後臺會遭遇程序凍結問題
// http://www.apple.com/safari/#gallery-icloud-tabs
// Safari takes advantage of power-saving technologies such as App Nap, which puts background Safari tabs into a low-power state until you start using them again. In addition, Safari Power Saver conserves battery life by intelligently pausing web videos and other plug‑in content when they’re not front and center on the web pages you visit. All told, Safari on OS X Mavericks lets you browse up to an hour longer than with Chrome or Firefox.1

importScripts('/socket.io/socket.io.js');

var count = 0,
    targetURL = ''
    ; 

var socket = io.connect('/');
socket.on('navigate', function (data) {
  count = count++;
  postMessage({targetURL:data.url,count:count});
});

Web移動端Fixed佈局的解決方案

ios上background-attachment:fixed不能正常工作

如何讓音訊跟視訊在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的大更新

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

manifest與快取相關:

移動端調適篇

手機抓包與配host

在PC上，我們可以很方便地配host，但是手機上如何配host，這是一個問題。

這裡主要使用fiddler和遠端代理，實現手機配host的操作，具體操作如下：

首先，保證PC和移動裝置在同一個區域網下；

PC上開啟fiddler，並在設定中勾選“allow remote computers to connect”

1. 首先，保證PC和移動裝置在同一個區域網下；

2. PC上開啟fiddler，並在設定中勾選“allow remote computers to connect” 
   

3. 手機上設定代理，代理IP為PC的IP地址，埠為8888（這是fiddler的預設埠）。通常手機上可以直接設定代理，如果沒有，可以去下載一個叫ProxyDroid的APP來實現代理的設定。

4. 此時你會發現，用手機上網，走的其實是PC上的fiddler，所有的請求包都會在fiddler中列出來，配合willow使用，即可實現配host，甚至是反向代理的操作。

也可以用CCProxy之類軟體，還有一種方法就是買一個隨身wifi，然後手機連線就可以了！

高階抓包

靜態資源快取問題

一般用代理軟體代理過來的靜態資源可以設定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 。

解決方案：不使用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 。

【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

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

庫的使用實踐

zepto.js

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

iscroll4

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直接閃退

1. 不要使用checkDOMChanges。雖然checkDOMChanges很方便，定時檢測容器長度是否變化來refresh，但這也意味著你要消耗一個Interval的記憶體空間
2. 隱藏iscroll滾動條，配置時設定hScrollbar和vScrollbar為false