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。

 

四、用transition作全页面滚动的时候手机端仍是会卡，尤为是安卓，能够考虑用

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

 

五、若是要计算元素高度的话不要直接拿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

 

七、关于布局

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