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 只對寬度已知的元素有效）