无js完美禁用网页放大等浏览器自带手势操作，达到仿app效果

最新推荐文章于 2024-05-11 09:31:19 发布

苦力怕水

最新推荐文章于 2024-05-11 09:31:19 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/creeperqb/article/details/119737184

版权

最近在开发一个网页小游戏，为了良好的游戏体验需要禁用网页放大、滚动，达到类似于app的效果。

首先是 html head 里的内容，从规定上禁用缩放。

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

然后在CSS里加了overflow:hidden禁止滚动，用user-select禁止选中，用cursor设置鼠标默认样式。

body{
    overflow: hidden;
    user-select: none;
    cursor: default;
}

在Safari浏览器实机测试时发现仍然可以放大，游戏过程中狂点按钮发现还tm能双击放大，长按按钮还给我弹出个图片预览窗口。

这些平日里便利的功能给我整麻了，查百度全是用js解决的，麻烦且拦截不全不说，还限制了游戏功能。

查谷歌，说 touch-action 属性即可解决。

CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域。（例如，浏览器内置的缩放功能）

主要的几个值：

auto：当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。
none：当触控事件发生在元素上时，不进行任何操作。
manipulation：浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。

我选择了在body上使用 touch-action: none; 屏蔽了所有的浏览器内置触控事件。