Question

如何让手机浏览器中的元素固定不动？

我用纯css+html写了个类似于qq聊天的静态页面，但是拖动浏览器底部和头部的时候页面总是上下动，如何才能固定不动呢？求大神解答，万分感谢！！！
/*底部输入框*/
.chat-input{ width:100%; height:60px; line-height:60px; border-top:1px solid #CCC; background:#fafafa; z-index:999; position:fixed; bottom:0;}





Answer 1

禁止手势缩放

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

手势在页面滑动时禁止事件传播

<script type="text/javascript">
document.body.addEventListener('touchmove', function(e) {
    e.stopPropagation();
    e.preventDefault();
});
</script>

试试，，，第一个，以前做的手机版面都会加，，是有效果的，，，第二个不知道有没有效，，，手上没有果机，，，你测试一下。。

追问

谢谢亲~第一个我试过了，只能让浏览器不放大缩小，拖动头部和底部还是会动，第二个我添加进去后整个页面都不动了，连里面的滚动条都不动了T T

追答

因为这个拖动是Safari的一个特有，，，如果你有说你的手机屏会超过一屏，那的确没办法解决这个，因为那个就是禁止整个滑动事件。。。

你可以查下Safari的相关资料。。。。

Answer 2

禁止手势缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>手势在页面滑动时禁止事件传播
<script type="text/javascript">
document.body.addEventListener('touchmove', function(e) {
e.stopPropagation();
e.preventDefault();
});
</script>试试，，，第一个，以前做的手机版面都会加，，是有效果的，，，第二个不知道有没有效，，，手上没有果机，，，你测试一下。。

Answer 3

在手机里面怎么拖动浏览器头的？

追问

按住头部拖动，整个浏览器都会动，有什么好的解决办法吗？查了一上午。。