第一、尺寸問題
設計圖的尺寸我剛開始要的是750*1334px，但是在實際應用中發現忽略了手機的狀態欄和導航欄的高度
iphone的設計標准，狀態欄和導航欄的獨立像素高度分別為40px和88px
android系統的可以更改狀態欄和導航欄的高度，可以取默認值為48px和100px
所以設計元素的展現內容應該是去掉狀態欄和導航欄的高度，取最大值148px,即最后的尺寸應該是750*1186
第二、頁面切換問題
之前沒有寫過h5頁面，所以就直接用swiper控制頁面切換。用一個變量控制是哪個頁面開始與結束動畫
第三、動畫卡頓問題
開啟gpu加速，最好是只有當前頁開啟加速，其他頁關閉。用兩個變量來控制
開始很多gqu的話會有頁面元素缺失。
頁面盡量少用絕對定位於相對定位
硬件加速最好只用在animation或者transform上。不要濫用硬件加速，因為這樣會增加性能的消耗，如果濫用反而會使動畫變得更加卡，這樣就得不償失了。
不要使用left、top來控制動畫，使用translate來控制動畫（left與top會觸發瀏覽器repaint，translate開啟硬件加速）
第四、錯誤提示彈框
用原生的alert就好
第五、蘋果手機返回按鈕問題
以為初始化頁面有微信授權，所以返回頁面的話會返回一個空白的授權頁。
手動往歷史記錄里添加一個記錄，與當前的網址一模一樣，監控返回按鈕，刷新當前頁面（window.reload()）
第六、
對於safari以及chrome，可能會在使用animation或者transition時出現閃爍的問題，可以使用以下的解決方法:
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; /**webkit上也可以用以下語句 **/ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
最近瀏覽器提出了一個 will-change 屬性，該屬性允許開發者告知瀏覽器哪一個屬性即將發生變化，從而為瀏覽器對該屬性進行優化提供了時間。下面是一個使用 will-change的示例：
.example { will-change: transform; }參考網址：
//屏幕尺寸，分辨率，像素，PPI之間的關系
http://www.chinaz.com/manage/2015/0902/441624.shtml
//h5頁面制作bug總結
http://www.open-open.com/lib/view/open1449325854077.html
//gpu加速頁面xuanran
http://ju.outofmemory.cn/entry/67235