第一、尺寸问题
设计图的尺寸我刚开始要的是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