微信h5页面制作总结

第一、尺寸问题

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