第一、尺寸问题
设计图的尺寸我刚开始要的是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);
-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; }
.example {
will-change: transform; }
