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

Disable touch panning for body of site on mobile devices

本文关键字：主体 触摸 站点 移动      更新时间：2023-09-26

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

foundationzurb.com没有这样做，我找到的大多数网站也没有。我相信msn.com现在还在这么做。

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

我试着

 <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对此很有用，继续向下滚动并尝试找到一个大边框突出的元素)并修改或删除它。

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

您可以使用javascript禁用浏览器的默认操作(如页面拖动)。

document.addEventListener("touchmove",function(event){event.preventDefault();});

但是，这也会阻止用户向下滚动。为了防止只侧向移动，你必须添加检查触摸方向的条件…

 document.addEventListener("touchmove",function(event){
      if(//check if the absolute value
           of last touch.x -current touch.x 
           is greater than some threshhold){
            event.preventDefault();
       }
  });
相关文章：