当前位置：486g游戏网 > 手游资讯 > 手机教程

双击屏幕放大怎么取消[手机浏览器双击放大的方法]

4029次浏览 | 2023-03-03 22:51:57 更新

来源：互联网

最佳经验

本文由作者推荐

网友采纳答案

来自浙江地区的冰懶网友提问：双击屏幕放大怎么取消

双击屏幕放大怎么取消（手机浏览器双击放大的方法）

切图网在为一个项目提供 h5 微信上使用的小游戏开发的时候，设计到快速点击按钮来发电的游戏规则，所以用户需要不断的点击按钮来发更多的电量，这不断的点击会触发双击的动作，浏览器就放大了。为了这个问题百度了很多资料，下面是主流的解决方案。

—————–

现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？

在 Mobile 页面上有提供 viewport 这个 meta，可以用它来设置缩放。但是在使用 viewport 之前要把页面的文档类型改成 Mobile 类型。通常的页面 DTD 都是 XHTML 或者简单的 HTML5 声明，移动设备要用下面这个声明。

代码如下:

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

设置了 DTD 之后就可以使用 viewport 使页面禁止缩放了。通常把 user-scalable 设置为 0 来关闭用户对页面视图缩放的行为。

代码如下:

但是为了更好的兼容，我们会使用完整的 viewport 设置。

代码如下:

如果需要更详细的关于 viewport 的资料可以参考 MDN

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

貌似 DTD 只声明成 HTML5 就可以了，下面加上 viewport 的标签

现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？

代码如下:

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

设置了 DTD 之后就可以使用 viewport 使页面禁止缩放了。通常把 user-scalable 设置为 0 来关闭用户对页面视图缩放的行为。

代码如下:

但是为了更好的兼容，我们会使用完整的 viewport 设置。

代码如下:

如果需要更详细的关于 viewport 的资料可以参考 MDN

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

貌似 DTD 只声明成 HTML5 就可以了，下面加上 viewport 的标签

—————————-

但是这个没有解决问题，因为我们采用的是 viewport 定宽的方式，而 viewport 定宽会导致 android 下浏览器禁止缩放的属性失效，所以上面的方法对这个项目无效，最后通过一个 css 代码解决问题，就是把按钮尽量做大到占满整个屏幕，因为我们发现，当元素很小的时候，双击这个元素，会导致浏览器放大，但是当这个元素占据了整个屏幕的宽度的时候，双击这个元素，不会导致放大页面，所以这个问题得以临时解决。如果你有更好的方法，可以与我们一起交流！

以上就是486g游戏网清易小编为大家介绍的关于《双击屏幕放大怎么取消（手机浏览器双击放大的方法）》相关内容。如果您喜欢这篇文章，那请您收藏我们的手机教程栏目，更多手机问题、科技等精彩内容为您呈现！

赞 (1592) 踩 (494)

本文标题：【双击屏幕放大怎么取消[手机浏览器双击放大的方法]】

本文链接：http://www.486g.com/news/20578.html