好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

H5项目常见问题及注意事项

//JS绑定自动播放(操作window时,播放音乐)

$(window).one('touchstart', function(){

music.play();

})

//微信下兼容处理

document.addEventListener("WeixinJSBridgeReady", function () {

music.play();

}, false);

//小结

//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常

//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间


重力感应事件

// 运用HTML5的deviceMotion,调用重力感应事件

if(window.DeviceMotionEvent){

document.addEventListener('devicemotion', deviceMotionHandler, false)

}

var speed = 30;

var x = y = z = lastX = lastY = lastZ = 0;

function deviceMotionHandler(eventData){

var acceleration = event.accelerationIncludingGravity;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){

//这里是摇动后要执行的方法

yaoAfter();

}

lastX = x;

lastY = y;

lastZ = z;

}

function yaoAfter(){

//do something

}

//说明:说见案例摇一摇效果中yao.js


微信浏览器用户调整字体大小后页面矬了,怎么阻止用户调整

//以下代码可使Android机页面不再受用户字体缩放强制改变大小,但是会有1S左右延时,期间可以考虑loading来处理

if (typeof(WeixinJSBridge) == "undefined") {

document.addEventListener("WeixinJSBridgeReady", function (e) {

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){

alert(JSON.stringify(res));

})

}, 0)

});

}else{

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){

alert(JSON.stringify(res));

})

}, 0)

}

//IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小

body { -webkit-text-size-adjust:100%!important; }

//最好的解决方案:最好使用rem或百分比布局


定位的坑

//fixed定位

//1.ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位

//2.android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位

//3.ios4下不支持position:fixed

//解决方案:使用[Iscroll](http://cubiq.org/iscroll-5),如:

.....

查看更多关于H5项目常见问题及注意事项的详细内容...

  阅读:42次