切图网在为一个项目提供h5微信上使用的小游戏开发的时候，设计到快速点击按钮来发电的游戏规则，所以用户需要不断的点击按钮来发更多的电量，这不断的点击会触发双击的动作，浏览器就放大了。为了这个问题百度了很多资料，下面是主流的解决方案。
-----------------
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？
在Mobile页面上有提供viewport这个meta，可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明，移动设备要用下面这个声明。
代码如下:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum/DTD/xhtml-mobile10.dtd">
设置了DTD之后就可以使用viewport使页面禁止缩放了。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
代码如下:
<meta name="viewport" content="user-scalable=0" />
但是为了更好的兼容，我们会使用完整的viewport设置。
代码如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
如果需要更详细的关于viewport的资料可以参考MDN
https://developer.mozilla/en-US/docs/Mobile/Viewport_meta_tag
貌似DTD只声明成HTML5就可以了，下面加上viewport的标签
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？
在Mobile页面上有提供viewport这个meta，可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明，移动设备要用下面这个声明。
代码如下:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum/DTD/xhtml-mobile10.dtd">设置了DTD之后就可以使用viewport使页面禁止缩放了。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
代码如下:
<meta name="viewport" content="user-scalable=0" />但是为了更好的兼容，我们会使用完整的viewport设置。
代码如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />如果需要更详细的关于viewport的资料可以参考MDN
https://developer.mozilla/en-US/docs/Mobile/Viewport_meta_tag
貌似DTD只声明成HTML5就可以了，下面加上viewport的标签
----------------------------
但是这个没有解决问题，因为我们采用的是viewport定宽的方式，而 viewport定宽会导致android下浏览器 禁止缩放的属性失效，所以上面的方法对这个项目无效，最后通过一个css代码解决问题，就是把按钮尽量做大到占满整个屏幕，因为我们发现，当元素很小的时 候，双击这个元素，会导致浏览器放大，但是当这个元素占据了整个屏幕的宽度的时候，双击这个元素，不会导致放大页面，所以这个问题得以临时解决。如果你有 更好的方法，可以与我们一起交流！
切图网长期致力于h5、响应式等web前端开发技术研究，关注用户体验，如果你对此感兴趣，就加我们公众微信：qietuwang
更多推荐
阻止手机浏览器双击放大的方法
发布评论