问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Javascript - 如何停止缩放、多点触控输入攻击？

社区维基
1
新手上路，请多包涵

当前的 Google chrome 稳定版停止手动阻止捏合缩放，这在具有以下设置的旧版本中是可能的：

 chrome://flags/#enable-pinch

我的信息亭受到一些随机缩放/多点触控输入的攻击。

如何告诉 JavaScript 禁用捏缩放/多点触控？ （为了保护售货亭）

我试过跟随但没有什么能阻止信息亭忽略捏缩放攻击。

 $(document).ready(function() {

  $(document).bind('contextmenu', function()  {
    console.log('NO NO NO. STOP!!!');
    window.location.reload();
    return false;
  });

  $(document).mousedown( function() {
    console.log('NO NO NO. STOP!!!');
    return false;
  });

});

编辑：

chrome://flags/#enable-pinch - 在谷歌浏览器中不再有效。谷歌不应该删除它，社区应该抗议不删除它。

原文由 user285594 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjquerywindowsgoogle-chromechromium
阅读 322
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您 应该 能够通过将此元标记添加到您的 <head> 来阻止用户放大：

 <meta name="viewport" content="width=device-width, user-scalable=no">

我的 Google Chrome 版本 Version 51.0.2704.84 (64-bit) 在我使用开发人员工具中的触摸仿真测试它时遵守此设置。

例如：

  1. 捏合缩放 的 网站： Hacker News

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  1. 捏合 不能 缩放的网站： Designer News

<meta name="viewport" content="width=device-width, user-scalable=no">

我想评论一下，允许您的用户放大和缩小不应被视为 “攻击” 。放大对于视力不好的人（或视障人士，我不确定正确和礼貌的英语术语是什么）非常重要。

如果您禁用自然缩放行为， _您应对网页的可读性承担全部责任_。

原文由 user3297291 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

我不知道这是否算作完整答案，但我没有代表发表评论。一种选择是为触摸事件设置一个处理程序 window.addEventListener("touchstart", touchHandler, false); 然后编写一个 touchHandler 函数

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()
    }
}

以下是有关使用触摸事件进行开发的更多信息 https://mobiforge.com/design-development/html5-mobile-web-touch-events 您必须为不同的触摸事件设置处理程序以防止默认的缩放行为取决于浏览器。可以在此处找到列表： http://www.quirksmode.org/mobile/default.html

我不知道这是否适合您，但值得一试。

原文由 zevnicsca 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题