在移动设备上停用网站正文的触摸平移 [英] Disable touch panning for body of site on mobile devices

问题描述

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

The site I am working on www.salonbkb.com when in a mobile browser will act responsive but will allow the user to use touch to move the site from left to right creating a whitespace on the remaining space after the drag.

Foundation.zurb.com不会执行此操作，也不会执行大多数我找到的网站。我相信msn.com仍然这样做。

Foundation.zurb.com does not do this nor do most sites I have found. I believe msn.com still does this.

如何防止这种情况发生。

How can I prevent this from happening.

我尝试了

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

但没有做任何事情。

推荐答案

如果你有 width = device-width，initial-scale = 1 。一些元素正在拉伸页面，允许用户横向平移。如果在100％宽度元素上有边距，或者 box-sizing 未设置为 border-box 并且在100％宽度元素上有填充。你只需要找到元素（chrome devtools是有用的，继续向下滚动，并尝试找到一个大边框伸出来），并修改或删除它。

A page will not do this ordinarily if you have width=device-width, initial-scale=1. Some element is stretching the page, allowing the user to pan sideways. This will often happen if you have margins on a 100% width element, or if box-sizing is not set to border-box and there is padding on the 100% width element. You just need to find the element (chrome devtools is useful for this, keep scrolling down and try to find the one with a big border that sticks out) and modify or remove it.

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

By the way, I would highly recommend against setting user-scalable=no or maximum-scale=1. It's terrible for usability. Users should be able to zoom in. There are almost no good use cases for this. If you're concerned about tap delay, use fastclick.

这篇关于在移动设备上停用网站正文的触摸平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！