移動web開發經驗總結 1

1.width可是寬度，initial-scale初始化縮放比例，maximum-scale允許使用者縮放的最大比例，minimum-scale允許使用者縮放的最小比例，user-scalable是否允許使用者縮放。

2.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同時遮蔽ios點選元素時出現的陰影。

4.-webkit-transform:translate3d(0, 0, 0)在ios下可以讓動畫更加流暢（這個屬性會呼叫硬體加速模式），但是在android下不可亂用，會產生很多見所未見的bug。

5.@-webkit-keyframes可以預定義很多你所想到的動畫，然後通過-webkit-transition來呼叫。

6.-webkit-background-size可以做高畫質圖示，不過一些低版本的android只能識別background-size，所以有必要兩個都要寫上；用這個屬性的時候推薦樹勇cover這個值，可以自動去匹配寬和高。

7.多用text-shadow這個屬性，可以美化文字效果, border-radius、box-shadow、gradient、border-image，在移動端都可以很好的支援，使用這些屬性可以實現很炫麗的按鈕。

8.android、ios4及以下，固定寬/高塊級元素的overflow:scroll/auto失效，屬於瀏覽器的bug，可借助第三方工具(iscroll)實現。

10.ios5+可以通過scrollto(0,0)來自動隱藏瀏覽器位址列。

11.css3動畫會影響你的自動聚焦，所以自動聚焦要在動畫執行之前來做，或者直接捨棄。

12.input框會預設呼出，如果想隱藏鍵盤讓其失焦即可。

13.當用iscroll時候，不能使用:focus偽類，否則滑動會卡。

14.使用iscroll的時候，在部分手機(部分小公尺、三星機型)中click會執行兩次，是因為iscroll在判斷滑動前,阻止了click事件,然後在滑動後,對原來的click事件進行了重構，在一些裝置上並沒有將預設的click阻止掉。所以，出現了類似雙擊的現象。

解決方案：

//1.自己寫乙個fn-->myclick，然後onclick="myclick();"呼叫。
var t1 = null;//這個設定為全域性
function myclick()elseelse
}/*自己的***/
}//2.上面的**，也可以寫在iscroll.js（4.2.5）的_end方法中，要注意var t1是全域性的
//3.國外論壇在iscroll.js(4.2.5)對應位置新增
topoffset: 0,
checkdomchanges: false,   // experimental
handleclick: true,
preventghostclick: false, // prevent ghost clicks?防止2次點選
ghostclicktimeout: 500,   // timeout for ghost click prevention設定時間差
/*** prevents any real clicks.
* see preventghostclick portion of _end().
*/_preventrealclick: function(e) 
},_end: function (e) , that.options.ghostclicktimeout);
}target.dispatchevent(ev);
//4.使用zepto的tap替換click

15.ios中禁止使用者儲存、複製，img標籤指定-webkit-touch-callout為none可以禁止裝置彈出列表按鈕，這樣使用者就無法儲存/複製你的。

16.使用-webkit-user-select: none; 禁止使用者進行複製, 選擇。

移動web開發經驗總結 1

移動web開發經驗總結

移動web開發經驗總結

iOS開發經驗總結1

相關推薦