mobileSite開發(fā)Tips

CrazyCodes 發(fā)布于2019-08-21 10:32 / 2260人閱讀

1，根節(jié)點(html,body)overflow屬性會遮蓋fixed定位元素
2，fixed元素點擊時會彈出底部的菜單，應(yīng)該是瀏覽器特性(safari)
3，fixed元素使用后，在body里面使用padding-bottom以占位，如果放入其他元素中，最好也占位，避免IOS滑動特性遮蓋元素
4，inline-block可以使用float讓元素保持在一條線上，無需使用vertical-align進行對齊
5，touch事件里阻止默認可以減少卡頓，但是touchStart里面如果阻止，頁面的滑動會受影響。
6，需要交替顯示的元素，最好都隱藏，根據(jù)需要顯示，可以避免頁面跳動
7，頁面返回統(tǒng)一調(diào)用histroy.back()方法就好，特殊處理進行URL判斷
8，從哪里來到哪里去，在link里加入returnUrl來進行回跳
9，對于浮動的banner關(guān)閉時間，瀏覽記錄可以通過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標簽，減少內(nèi)存占用。
14，如果需要在click事件中在綁定click事件，最好先解綁。或者換一種思路，使用trigger進行觸發(fā)click事件
15，需要計算內(nèi)部寬度，可以用padding進行寬度的設(shè)置，用于布局
16，對于圖片，如果想完整放入div，需要設(shè)置display:block，否則會出現(xiàn)白邊，因為圖片默認是inline屬性
17，由于瀏覽器對border渲染不一致(或滑動時候會改變寬度)，渲染粗細不均勻，可以使用div進行模擬border，也可以使用border-image代替
18，對于圖片顯示模糊，可以使用padding進行縮小，但不能從根本上解決問題
19，input去掉原本樣式用圖片代替時候，需要注意IOS里面會有黑色的背景，否則可能有黑邊，設(shè)置background-color:white即可
20，關(guān)于跳轉(zhuǎn)，支付寶WAP跳轉(zhuǎn)，replace替代href跳轉(zhuǎn)
21，定時器一定要記得清理，重復(fù)時會內(nèi)存不釋放就會卡頓
____________________________________
保持更新...