javascript - 在移动设备上禁用网站正文的触摸平移

Question

我在 www.salonbkb.com 上工作的网站在移动浏览器中会响应，但会允许用户使用触摸从左向右移动网站，在拖动后的剩余空间上创建一个空白。

Foundation.zurb.com 不这样做，我发现的大多数网站也不这样做。我相信 msn.com 仍然这样做。

我怎样才能防止这种情况发生。

我试过了

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

但这并没有做任何事情。

Answer 1

如果您有 width=device-width, initial-scale=1，页面通常不会这样做。某些元素正在拉伸(stretch)页面，允许用户横向平移。如果您在 100% 宽度的元素上有边距，或者如果 box-sizing 未设置为 border-box 并且在 100% 宽度上有填充，则经常会发生这种情况元素。您只需要找到该元素(chrome devtools 对此很有用，继续向下滚动并尝试找到带有突出的大边框的元素)并修改或删除它。

顺便说一下，我强烈建议不要设置 user-scalable=no 或 maximum-scale=1。这对可用性来说很糟糕。用户应该能够放大。这几乎没有好的用例。如果您担心点击延迟，请使用 fastclick .