移动开发的小tip
最近做的是微信的二次開發,因為是第一次做所以有很多東西要記下來,免得下次在做移動端的時候再經歷那么多的坑。
移動端的動畫不要使用jq寫,jq mobile好像也是不行。
我們的項目最后是使用的css3的動畫做成的,(animated.css)。用zepto好像也是一個不錯的選擇。
移動頁面點擊時候會有300ms延遲(歷史原因),解決的辦法有很多。可能使用zepto或者禁止縮放是比較省事的辦法。
在移動端的輸入框也有點技巧:可以在輸入的時候有更好的用戶體驗,給input的type添加:tel;或者更好的
純數字鍵盤:<inpuut type='text' pattern="[0-9]*"/> 輸入字母大小寫:autocapitalize='off' 關閉自動大小寫 autocorrect='on' ? ? ? 自動糾錯開啟和關閉 再看資料的時候,滾動可能還有的坑和解決方案 全劇滾動:滾動條在body節點或者更高層。 局部滾動:滾動條在body下的某個dom節點。 彈性滾動效果: ios下的效果:全劇滾動默認支持彈性滾動。 局部滾動需要在dom節點上添加{overflow:auto}或者在body上添加{-webkit-overflow-scrolling:touch;} 建議直接放在body上可以避免小bug。 安卓:原生不支持彈性滾動。 ios: ?局部滾動:微信頁面會有出界情況。(頂部或者底部會出現出界的情況,),局部滾動會更加難看。 局部滾動解決方案(scrollFix) if (startTopScroll<=0) { elem.scrollTop=1; } if (startTopScroll+elem.offsetHeight>=elem.scrollHeight) { elem.scrollTop=elem.scrollHeight-elem.offsetHeight-1; } 全劇滾動目前沒有好的解決辦法,只能把全劇滾動改成局部滾動。 安卓:盡量不要用局部滾動,局部滾動有bug。轉載于:https://www.cnblogs.com/upcircle/p/5112609.html
總結
- 上一篇: 成就PHP高手的五个必由之路
- 下一篇: Codeforces Round #18