手机浏览器双击放大功能怎么关闭(手机浏览器怎么设置双击不放大)

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

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

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

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

代码如下:

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

代码如下:

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

代码如下:

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

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

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

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

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

代码如下:

设置了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代码解决问题,就是把按钮尽量做大到占满整个屏幕,因为我们发现,当元素很小的时 候,双击这个元素,会导致浏览器放大,但是当这个元素占据了整个屏幕的宽度的时候,双击这个元素,不会导致放大页面,所以这个问题得以临时解决。如果你有 更好的方法,可以与我们一起交流!

切图网长期致力于h5、响应式等web前端开发技术研究,关注用户体验,如果你对此感兴趣,就加我们公众微信:qietuwang

(0)

相关推荐

  • 苹果iPhone11手机的朗读屏幕功能怎么关闭

    今天给大家介绍一下苹果iPhone11手机的朗读屏幕功能怎么关闭的具体操作步骤.1. 解锁手机后,找到桌面上的设置图标,打开.2. 进入设置页面后,找到通用选项,打开.3. 然后在打开的通用页面,找到 ...

  • 苹果iPhone11手机的智能反转功能怎么关闭

    今天给大家介绍一下苹果iPhone11手机的智能反转功能怎么关闭的具体操作步骤.1. 解锁手机后,找到桌面上的设置图标,打开.2. 进入设置页面后,找到通用选项,打开.3. 在打开的通用页面,找到辅助 ...

  • 苹果iPhone手机中的iMessage功能如何关闭

    今天就跟大家介绍一下苹果iPhone手机中的iMessage功能如何关闭的具体操作步骤.1. 苹果手机上的iMessage支持短信.视频等的发送,安全性非常高,只要在WiFi或者蜂窝数据网络下,即可进 ...

  • 手机自动连接WiFi功能怎么关闭

    手机已经成为了一个现代人的必需品,网络也是离不开我们的生活.下面为你介绍一下手机自动连接WiFi功能怎么关闭.(以我的华为手机为例) 操作方法 01 进入手机的"设置",找到&qu ...

  • 手机qq看点怎么开启/关闭 手机qq看点功能关闭/开启操作方法教程

    手机qq看点怎么开启/关闭 第一步是打开手机qq,找到“更多”,然后进入“已开启功能” 第二步:找到“看点”进去选择关闭. 如果你想打开QQ看点,手机qq看点开启的方式和关闭的方法一样.以上就是手机q ...

  • 手机QQ坦白说功能怎么关闭

    QQ是我们常用的社交软件之一,我们可以看到在QQ联系人界面上方有一个坦白说功能,接下来小编就教大家怎样关闭这个功能具体如下:1.首先我们需要打开手机进入到手机桌面.然后在桌面上找到QQ图标点击打开,进 ...

  • 华为手机闹钟音量键功能怎么关闭

    华为手机在闹钟响起的时候音量键默认为静音功能,所以如果我们在闹钟响起的时候直接按一下音量键就可以将闹钟静音,接下来小编就教大家怎样关闭这个功能具体如下:1. 首先我们打开手机进入到手机桌面然后在桌面上 ...

  • 手机QQ坦白说功能如何关闭

    qq是我们常用的社交软件之一,我们在使用QQ的过程中可以发现联系人界面上方有一个坦白说,但是坦白说功能并不是所有人都喜欢的,接下来小编就教大家怎样关闭坦白说功能.具体如下:1首先我们打开手机进入到桌面 ...

  • 手机支付宝付款码功能怎么关闭

    支付宝是我们经常使用的支付软件之一,使用支付宝的过程中我们只需要打开付款码就可以轻松付款,接下来小编就教大家怎样关闭手机支付宝中的付款码功能.步骤1. 首先我们打开手机进入到桌面,找到支付宝图标点击打 ...