禁用移动设备上的站点主体的触摸平移

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.一些元素正在拉伸页面,允许用户横向平移.如果在100%宽度元素上有边距,或者box-sizing未设置为border-box100%宽度元素并且有填充,则通常会发生这种情况.你只需要找到元素(chrome devtools对此有用,继续向下滚动并尝试找到一个有大边框突出的元素)并修改或删除它.

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