h5推广页面心得

1.

h5 audio标签在手机端打开有的可以自动播放有的不可以，纯H5的话是很难解决这个问题的。

解决方法可以给body添加一个ONE的事件，因为用户会有点击手机屏幕的习惯，来造成音乐自动播放的假象。

或者是

document.getElementById('bgMusic').play();
document.addEventListener('WeixinJSBridgeReady', function(){
	document.getElementById('bgMusic').play();
}); 

 但这个逻辑只在微信中有效

2.

css3真的很好用，翻页效果本来用的js插件，兼容性不好，各个手机的支持也不好，而且用起来也不够灵活，使用css3可以制作很多3D的翻页效果，2D效果看起来也更加流畅，只要通过增删class就好

 

3.手机浏览器要加webkit。

 

4、用transition做全页面滚动的时候手机端还是会卡，尤其是安卓，可以考虑用

-webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);

 

5、如果要计算元素高度的话不要直接拿img的宽高来，因为受加载顺续的影响，可能为0，可以用图片在body中的百分比从而直接全部用body来计算

eg:

var page6TextTop =  bodyWidth * (889/750) / 2 + $('body').height() * 0.07 - bodyWidth * 0.51 * (332/384) / 2;

 

6.media query 的问题

在meta中定义了<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />

而后css里面如果media query使用devic-width 会导致布局混乱，直接用width即可

一篇相关文章http://weizhifeng.net/viewports.html

 

7、关于布局

为了自适应所以所有元素都用百分比布局。为了适应iphone4所以所有img都只设置了height，但这样会使得元素很难水平居中。设width方便居中，但可能会影响一屏的显示，尤其是宽屏的手机，还要自己取舍。精确定位的话 比如两个动画骨骼的衔接最好还是自己算。（ps 总是忘记z-index只对绝对定位的元素有效 margin:0 auto 只对宽度已知的元素有效）