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

<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;

            //上下滑动，使用浏览器默认的上下滑动

        }

    })

}