手机端页面左右滑动的解决方法
2017-05-24 00:00
495 查看
最近在做手机端,本来已经写好了页面,但是在手机上测试的时候,发现页面左右可以滑动,在网上找的都有点不全,先积累下来方便以后查看,如果有需要你可以收藏,可以有以下几种解决方式:
写meta标签:
上述是设置了手机移动端视图属性,设置width是设备的实际宽度,默认缩放比例是一比一,不允许用户缩放。
如果上述没有解决,就需要看一下你页面中的一些盒子的css样式中,盒子大小是不是设置的超过了屏幕本身的大小,需要你修改css样式
如果上述检查过程中页面布局什么的都没有问题,PC端页面也可以直接给body添加样式overflow-x:hidden来解决。IE6、7下不会生效,需要给html增加overflow:hidden属性。如果是移动端,就需要去除遮罩层和按钮层的touchmove的默认事件,代码在下面:
有时候还是改不了,后来发现是在body上加了(min-width:1200px),真的找了好久。
各位路过的大神们,如果还有别的解决方案,记得及时留言哈,多谢啦!
写meta标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
上述是设置了手机移动端视图属性,设置width是设备的实际宽度,默认缩放比例是一比一,不允许用户缩放。
如果上述没有解决,就需要看一下你页面中的一些盒子的css样式中,盒子大小是不是设置的超过了屏幕本身的大小,需要你修改css样式
如果上述检查过程中页面布局什么的都没有问题,PC端页面也可以直接给body添加样式overflow-x:hidden来解决。IE6、7下不会生效,需要给html增加overflow:hidden属性。如果是移动端,就需要去除遮罩层和按钮层的touchmove的默认事件,代码在下面:
$('.box,#bg').bind("touchmove",function(e){ e.preventDefault(); }); /*#bg为透明度为0.6的一个遮罩页面,.box为遮罩层上的按钮。*/
有时候还是改不了,后来发现是在body上加了(min-width:1200px),真的找了好久。
各位路过的大神们,如果还有别的解决方案,记得及时留言哈,多谢啦!
相关文章推荐
- android跳转界面(页面)发现界面首先出现的是下面的部分,滑动才能看到上面的解决方法
- DZ3.2手机端访问bug彻底解决方法:您访问的页面无手机页面,是否进一步访问电脑版
- iOS 同一页面加载上百张图片,迅速滑动时导致内存暴涨程序崩溃的参考解决方法
- ViewPager的使用方法(实现左右滑动切换页面)
- SwipeRefreshLayout 包含左右滑动的banner手势冲突解决方法
- Appium 1.7 实现上下、左右滑动页面方法
- 同ListView该接口无法通过手势滑动左右切换界面问题解决方法
- uiautomator在使用scrollable遇到页面有两个可滑动控件的解决方法
- 使页面左右无法滑动(手机端)
- Android中SwipeRefreshLayout和ViewPager左右滑动冲突的原因以及正确的解决方法
- 手机端左右滑动,不用写js(只有页面切换到移动端可以看)
- android2.3平台上web页面(html5中使用frame)不能滑动的解决方法
- 关于iOS页面中scrollview中嵌入百度地图滑动冲突问题解决方法
- SwipeRefreshLayout与SwipeMenuListView上下左右滑动冲突解决方法
- 手机端滑动实现页面左右切换效果
- 手机端和电脑端左右分屏录制视频解决方法
- Adobe Acrobat用鼠标滚轮时页面滑动速度很慢的解决方法
- Iscroll 4 同一页面中,能够滚动上下并且左右同存效果,(滑动时很飘)解决办法(2)
- android2.3平台上web页面(html5中使用frame)不能滑动、不允许缩放的解决方法
- Android处理手势识别的解决方法(左右滑动)