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

-----------------

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

html5网页禁止放大阻拦手机阅读器双击放年夜的办法 React
（图片来自网络侵删）

在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\"大众&gt;

设置了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.org/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.org/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.org/en-US/docs/Mobile/Viewport_meta_tag

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

----------------------------

但是这个没有办理问题，由于我们采取的是viewport定宽的办法，而 viewport定宽会导致android下浏览器 禁止缩放的属性失落效，以是上面的方法对这个项目无效，末了通过一个css代码办理问题，便是把按钮只管即便做大到占满全体屏幕，由于我们创造，当元素很小的时 候，双击这个元素，会导致浏览器放大，但是当这个元素霸占了全体屏幕的宽度的时候，双击这个元素，不会导致放大页面，以是这个问题得以临时办理。
如果你有 更好的方法，可以与我们一起互换！

切图网长期致力于h5、相应式等web前端开拓技能研究，关注用户体验，如果你对此感兴趣，就加我们"大众年夜众微信：qietuwang