华为双击放大怎么关闭 必看:阻止手机浏览器双击放大的方法

各位小伙伴好,今天吴春菊为大家带来了一篇关于华为双击放大怎么关闭,阻止手机浏览器双击放大的方法的分享,还有关于页面,缩放,浏览器,代码,声明这些的实用干货和最新内容,如果你想要成为这个领域的专家,那么你需要不断学习和总结,这篇文章就是一个好的开始。

华为双击放大怎么关闭,阻止手机浏览器双击放大的方法

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

好了,今天就说到这里,祝大家学有所得!希望能帮到各位朋友,如果你觉得这篇华为双击放大怎么关闭 必看:阻止手机浏览器双击放大的方法对你有所启发,可以分享给身边的人,让大家一起学习进步!

本文发布者:管理员,不代表寂寞网立场,转载请注明出处:https://www.jimowang.com/p/51690.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 jimowangmail@126.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年7月27日 16:35
下一篇 2023年7月27日 16:44

相关推荐

  • 万能滑屏:未来智能设备交互新范式?

    文章目录:什么是万能滑屏?万能滑屏的优势万能滑屏的应用场景如何选择适合自己的万能滑屏设备?未来展望在科技日新月异的今天,智能设备的交互方式正经历着一场革命,而在这场革命中,万能滑屏技术以其独特的魅力,成为了业界关注的焦点,万能滑屏究竟是什么?它又将如何改变我们的日常生活呢?让我们一起揭开这神秘的面纱。什么是万能滑屏?(万能滑屏,顾名思义,是一种可以应用于各种智能设备的滑动操作技术,它通过传感器检测

    1天前
  • 樱花校园模拟器1.038.51版评测:模拟校园新篇章,如何打造你的梦想校园?

    在春意盎然的季节,樱花校园模拟器1.038.51版如约而至,为模拟游戏爱好者带来一场视觉与体验的双重盛宴,你是否好奇,这款新版本又有哪些亮点?又该如何在众多功能中找到最适合你的玩法?让我们一起揭开这款模拟器的神秘面纱。【樱花盛开,校园焕新颜】随着春天的脚步,樱花校园模拟器1.038.51版如约而至,据最新数据显示,此次更新带来了超过50项新功能和优化,让玩家在模拟校园的过程中享受到更加真实、丰富的

    2026年3月21日
  • 苹果手机如何关机开机重启 精选:iPhone12开关机方式快捷键

    大家好,今天郑羽纯想和大家分享一下关于苹果手机如何关机开机重启,iPhone12开关机方式快捷键的知识,还有手机,快捷键,音量,苹果,方式的一些实用干货和最新技巧分享,思路往往是解决问题的关键所在。我精心整理了一些干货,希望能够帮助你们更好地把握思路。 有很多刚入手iPhone12的小伙伴不知道怎么关机,小编就为大家带来了iPhone12的关机方法以及教程,…

    2023年7月15日
  • 手机触摸屏乱跳解决方法 详细介绍:屏幕失灵乱跳乱点是什么原因

    最近有很多朋友问钱莹莹关于手机触摸屏乱跳解决方法,屏幕失灵乱跳乱点是什么原因的事情,我来为大家解答一下,以及触摸屏,手机,屏幕,充电器,问题相关的最新实用干货和分享技巧,作为一名老手,我深知思路的重要性。因此,我写下这篇文章,希望能给新手提供一些指导和建议。 苹果手机屏幕失灵乱跳乱点怎么解决? 苹果手机屏幕如果出现屏幕失灵、屏幕自己乱跳、点这里跳哪里的情况,…

    2023年9月24日 经验分享
  • 如何分盘win10教程-win10系统给磁盘分组方法

    小伙伴们你们好,今天孙一诺来给大家讲讲如何分盘win10教程,win10系统给磁盘分组方法,还有磁盘,方法,教程,系统,电脑相关的实用干货和最新技巧分享,在这篇文章中,我将会分享一些我在这个领域学习和实践的经验,希望对你有所帮助。 这样使用起来比较麻烦,找资料也是很麻烦,使用起电脑就不是那么方便了,今天就为大家分享win10系统给磁盘分组的方法。 1、打开“…

    2023年8月19日
  • 苹果a1586电池怎么更换 优选:苹果手机电池更换教程

    各位小伙伴们,大家好啊,今天许桓山想和你们聊聊苹果a1586电池怎么更换,苹果手机电池更换教程这个话题,还有电池,苹果,教程,手机电池,螺丝的一些实用干货和最新技巧分享,作为一名老手,我深知思路的重要性。因此,我写下这篇文章,希望能给新手提供一些指导和建议。 苹果手机从11系统开始,就可以显示电池健康度了, 也是大家熟知的“降频门”事件, 苹果认为,电池健康…

    2023年11月11日