LittleWhiteRabbit
LittleWhiteRabbit
2016-11-07 14:19
采纳率: 33.3%
浏览 1.4k

关于css动画效果移动问题(手机屏幕适配问题)

我用js对css做的一个样式进行了简单的移动效果实现,但在手机上会移出手机屏幕,
如何解决这个问题呢?谢谢!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • Runing_snailLBNL
    Runing_snailLBNL 2016-11-08 01:32

    {
    xtype: 'button',
    text: '',
    iconCls: 'plus white',
    cls: 'newBtn',
    ui: 'action',
    action: 'new'
    ,
    draggable:{
    direction: 'both',
    initialOffset: { x: window.innerWidth - 20 - window.innerWidth / 2, y: window.innerHeight },
    constraint: {
    min: { x: 0, y: 0 },
    max: { x: window.innerWidth - 50, y: window.innerHeight - 110}
    }
    }
    }
    这是一个可移动的button且不会移出屏幕,你可以模仿着实现你的拖动不移出屏幕。

    点赞 评论
  • showbo

    判断边界啊。。

     var clientWidth=document[document.compatMode=='CSS1Compat'?'documentElement':'body'].clientWidth;//这个变量就是浏览器可是宽度,移动的时候判断下left+拖动块的宽度超过后不允许继续设置left值什么的
    
    点赞 评论
  • candy_tity
    陈田田 2016-11-08 03:29

    可能是因为移动元素移动的距离超出了手机屏幕所能显示的范围。
    解决的方法有很多种:
    第一,页面元素的单位不要用px,而使用em或者rem。
    第二,如楼上所说用JS判定边界。
    第三,页面中是否添加了类似底下的标签:

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    
    

    当然,这只是一些可能性,具体的问题希望楼主可以贴出源码,以便探讨。
    希望我的回答对你有所帮助。

    点赞 评论
  • zpcsgo
    zpcsgo 2016-11-08 11:52

    window.ineerwidth,文档显示区宽度,只要移动的距离不要大于innerWidth-你动画的宽度,判断一下就OK了

    点赞 评论
  • qq_34258202
    玖森 2016-11-19 01:48

    可以用js动态获取屏幕宽度,设定动画最大宽度就可以。

    点赞 评论
  • martian2049
    martian2049 2021-01-15 19:22

    就看看

    点赞 评论

相关推荐