美文网首页
移动端页面可左右移动一小点距离的bug

移动端页面可左右移动一小点距离的bug

作者: wxyzcctn | 来源:发表于2019-01-17 21:03 被阅读0次

        自己在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的范围做一下限制。

相关文章

  • 移动端页面可左右移动一小点距离的bug

    自己在PC端上做了一个页面,调试基本没有问题,但是放到移动端的时候就出现了一个bug,移动端的页面显示的时候,页面...

  • 判断PC端或者移动端 跳转对应页面

    移动端页面写法 PC端页面写法

  • 放大镜

    mask移动的距离/mask可移动的最大距离 = bigImg移动的距离/bigImg可移动的最大距离 对于滚动条...

  • 移动端

    移动端产品是随着最近几年移动端的普及而诞生的,移动端的特点是方便携带以及操作、私密性比较好、每个页面可展现内容较...

  • 移动端

    app Web App Hybird App 移动端页面 设计图 测试 移动端的设置 移动端的布局 弹性 fl...

  • 一篇真正教会你开发移动端页面的文章(一)

    一个移动端的时代 从我工作以来,开发的一直都是移动端的页面,只有偶尔去开发几个PC端的页面,现在是一个移动端的时代...

  • CSS新手向的知识点<三>

    关于移动端页面 通常来讲做移动端页面适配一般有三种方式 前端方向:移动页面响应式,用媒体查询(media quer...

  • 移动端web页面适配

    移动端Web页面,即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一,在做移动端的Web页面...

  • 移动端页面

    手机和PC端交互方式不一样,移动端多数没有hover,没有resize,没有滚动条,有touch 1、媒体查询 在...

  • 移动端页面

    媒体查询 第一种方式: 直接在head里写style 比如: 第二种方式:引入CSS文件 上面这行代码表示 : ...

网友评论

      本文标题:移动端页面可左右移动一小点距离的bug

      本文链接:https://www.haomeiwen.com/subject/hljwdqtx.html