手机端页面可以左右轻微拖动的bug

最近在做百格教育的网站，PC端各种改，终于弄完了。但是手机端也开始了，首先遇到了一个问题，就是不知道怎么回事显示在浏览器上的页面，在手机模拟的时候出现左右拖动的时候右边出现一个白色的边距。基本上算是可以左右拖动，基本上是整个HTML包裹的东西都能拖动。

很奇怪，首先检查了各个盒子模型左右有没有padding或者margin，没有问题后有重新设置了html,body的宽度。还是不行。最后和写的其他页面对比了一下。发现出现问题的页面都是因为有一个js效果，从左边出来一个nav的div，然而这个div是js动态加的，不是写死的。因此比较难改。

于是在segmentfault上面找了一下，解决方法如下：

1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes" />第一句就不用说了，第二句的意思是告诉iOS这是个应用，就不会像网页一样可以滚动到顶部回弹一下的效果，就是可以看到苹果默认背景灰色部分的那个效果。如果你不需要可以删掉这行。

2.阻止默认拖动事件，$("body").on("touchmove",function(event){
event.preventDefault;
}, false)
然后点击取消或者确定时再取消body上的绑定
$("body").off("touchmove")；

3.试了上面两个方法都没用的前提下，在测试了nav出现的js效果之后注意到overflow属性，于是用overflow-x:hidden完美的解决了左右轻微拖动的问题。

总结：遇到这个问题，测试了页面布局结构很久没有发现问题，最后通过一个简单的属性解决了问题，还是感觉到前端基础的重要性，有些问题的解决方案也许就是一些很简单的属性。还是应该好好打基础。