mobileSite開發Tips

1，根節點(html,body)overflow屬性會遮蓋fixed定位元素
2，fixed元素點擊時會彈出底部的菜單，應該是瀏覽器特性(safari)
3，fixed元素使用後，在body裏面使用padding-bottom以佔位，若是放入其餘元素中，最好也佔位，避免IOS滑動特性遮蓋元素
4，inline-block能夠使用float讓元素保持在一條線上，無需使用vertical-align進行對齊
5，touch事件裏阻止默承認以減小卡頓，可是touchStart裏面若是阻止，頁面的滑動會受影響。
6，須要交替顯示的元素，最好都隱藏，根據須要顯示，能夠避免頁面跳動
7，頁面返回統一調用histroy.back()方法就好，特殊處理進行URL判斷
8，從哪裏來到哪裏去，在link里加入returnUrl來進行回跳
9，對於浮動的banner關閉時間，瀏覽記錄能夠經過localStorage進行存儲
10，若是瀏覽器開啓無痕模式，webStroage的setItem方法會報錯，須要try Catch提醒用戶
11，使用.clearfix:after {content: "";display: table;clear: both;}進行圖片和文字的橫向排列
12，文字多行省略{overflow: hidden; text-overflow: ellipsis;display: -webkit-box;  -webkit-line-clamp: 2;-webkit-box-orient: vertical;-webkit-box-pack: center;}
13，能使用background-image當背景的就不使用img標籤，減小內存佔用。
14，若是須要在click事件中在綁定click事件，最好先解綁。或者換一種思路，使用trigger進行觸發click事件
15，須要計算內部寬度，能夠用padding進行寬度的設置，用於佈局
16，對於圖片，若是想完整放入div，須要設置display:block，不然會出現白邊，由於圖片默認是inline屬性
17，因爲瀏覽器對border渲染不一致(或滑動時候會改變寬度)，渲染粗細不均勻，能夠使用div進行模擬border，也能夠使用border-image代替
18，對於圖片顯示模糊，能夠使用padding進行縮小，但不能從根本上解決問題
19，input去掉本來樣式用圖片代替時候，須要注意IOS裏面會有黑色的背景，不然可能有黑邊，設置background-color:white便可
20，關於跳轉，支付寶WAP跳轉，replace替代href跳轉
21，定時器必定要記得清理，重複時會內存不釋放就會卡頓
____________________________________
保持更新...