• meta標簽

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">寬度＝設備寬度，初始比例＝1，阻止放大，最小比例＝1，最大比例＝1；

target-densityDpi=device-dpi 阻止縮放（有時user-scalable=no沒有效果，需要加上這句）

• 使用rem

　　* IE9開始支持
　　* IOS4.0開始支持
　　* 安卓支持

• Android2.3不支持

　　* position:fixed-->使用iscroll.js插件
　　* 漸變新式寫法不支持,需要使用老式寫法

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#666666), color-stop(.3,#333333))

　　* 陰影不支持，用邊框border
　　* 使用flex

父元素:display:-webkit-box; 子元素:-webkit-box-flex:1;

• 盒模型溢出

-webkit-box-sizing:border-box;

• 圓角問題

當position:absolute;z-index:value;border-radius:value同時出現時，圓角上標題設置顏色后，圓角會成直角
解決方法：在嵌套一層，父元素為position:absolute;z-index:value,子元素為border-radius:value;

• 需要注意的

　　-webkit-tap-highlight-color:rgba(0,0,0,0); //取消點擊的背影顏色
　　-webkit-focus-ring-color: rgba(0, 0, 0, 0);
　　-webkit-appearance:none; //去除默認樣式
　　-webkit-touch-callout: none; //長按時不觸發系統菜單
　　-webkit-user-select: none; //用戶不能選擇元素間的任何內容
　　outline:0 none; //取消輪廓

• 系列文章：

* [騰訊Cson的移動web開發最佳實踐](http://www.ipresst.com/works/528892e11d0495f30f00762e)
* [20個實用webApp前端開發技巧](http://www.candoudou.com/archives/155)
* [webApp開發進階](http://www.w3ctech.com/p/1154)
* [tap-hightlight-color](http://www.cnblogs.com/lilyimage/p/3363632.html)

?

?字體：font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

?

<meta?name="format-detection"?content="telephone=no"> ?數字識別為電話號碼 等分：flex或者table, ? DEMO:?http://jsbin.com/vojoj/2/ 父元素： display : table; table-layout : fixed; width : 100%; 子元素: display : table-cell;

轉載于:https://www.cnblogs.com/joya0411/p/3586691.html

總結

以上是生活随笔為你收集整理的关于Webapp的注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。