移动端页面防止左右滑动出现黑色背景

<meta name="x5-fullscreen" content="true">

<meta name="full-screen" content="yes">

在head中加入如上2条代码，将页面设置成全屏模式

//监听手指滑动触发事件，设置系统对左右滑动事件不做出处理。

window.onload=function(){
    var xx, yy, XX, YY, swipeX, swipeY;
    var div = document.getElementsByTagName("div");
    document.body.addEventListener('touchstart', function(event) {
        xx = event.targetTouches[0].screenX;
        yy = event.targetTouches[0].screenY;
        swipeX = true;
        swipeY = true;
    })
    document.body.addEventListener('touchmove', function(event) {
        XX = event.targetTouches[0].screenX;
        YY = event.targetTouches[0].screenY;
        if (swipeX && Math.abs(XX - xx) - Math.abs(YY - yy) > 0) //左右滑动
        {
            event.stopPropagation();//组织冒泡
            event.preventDefault();//阻止浏览器默认事件
            swipeY = false;
            //左右滑动
        } else if (swipeY && Math.abs(XX - xx) - Math.abs(YY - yy) < 0) { //上下滑动
            swipeX = false;
            //上下滑动，使用浏览器默认的上下滑动
        }
    })

}