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

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

{
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且不会移出屏幕，你可以模仿着实现你的拖动不移出屏幕。

判断边界啊。。

 var clientWidth=document[document.compatMode=='CSS1Compat'?'documentElement':'body'].clientWidth;//这个变量就是浏览器可是宽度，移动的时候判断下left+拖动块的宽度超过后不允许继续设置left值什么的

可能是因为移动元素移动的距离超出了手机屏幕所能显示的范围。
解决的方法有很多种：
第一，页面元素的单位不要用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" />

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

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

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

就看看