自己在PC端上做了一个页面，调试基本没有问题，但是放到移动端的时候就出现了一个bug，移动端的页面显示的时候，页面可以左右移动一小点距离，在网上找了一些解决方案，最终解决了，这里做一个记录，以方便今后遇到回头查看。
解决方案一：
在HTML中的head中加上如下meta标签：
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
上述代码的内容中， Viewport就是指视口，"width=device-width：宽度就是指设备的宽度，user-scalable=no：用户是否可以缩放，initial-scale=1.0：初始的缩放倍数是1.0，最大最小的缩放倍数都是1.0，也就是说不进行缩放。也可以不添加maximum-scale=1.0, minimum-scale=1.0，实现的效果都是一样的。
不过这个标签一般在写的时候都会加上的，所以出现移动端页面左右移动的bug需要看下面的解决方案。
解决方案二：
检查自己的页面中的元素的布局是否已经超过了移动端页面的大小，有的布局会超出移动端的页面，这个时候就会出现一个页面放不下需要显示的内容，移动端页面就需要左右移动才能显示完要显示的内容，（自己就是出现了这样的情况，只需要将超出页面的部分缩小到对应区域就可以了）
解决方案三：
如果页面中的布局没有明显的超出范围的情况，或者说超出范围的那一部分进行了透明的设置，不易看出布局的样式，可以设置body的CSS属性为：overflow-x:hidden，移动端页面中显示不完整的部分直接隐藏掉就不会出现左右移动的情况了（因为我自己的情况是布局超出了范围，所以这个方案也可以解决我的问题）。
解决方案四：
阻止去除遮罩层和按钮层默认的拖动事件
$('.box,#bg').bind("touchmove",function(e){
e.preventDefault();
});
/*#bg为透明度为0.6的一个遮罩页面，.box为遮罩层上的按钮。*/
解决方案五：
上面的方案还解决不了的情况下，在网上找到的一种方案是在body上加CSS属性
min-width:1200px
我们没有遇到这种情况，但是对这个的理解思路同上面方案三的情况一样，都是将body的范围做一下限制。
网友评论