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

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

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

切图网在为一个项目提供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

相关推荐

  • 2019最强拍照手机排名 精选:最佳拍照手机榜单

    大家好,今天郑蘅靓为大家准备了一些关于2019最强拍照手机排名,最佳拍照手机榜单的知识点,还有影像,摄像头,屏幕,算法,处理器的一些实用干货和最新内容分享,作为一名老手,我深知思路的重要性。因此,我写下这篇文章,希望能给新手提供一些指导和建议。 最近两年很多手机厂商在缺乏创新的情况下,这两代是疯狂的堆影像,什么大底、长焦、像素等等,硬件提到顶端的同时软件也没…

    2023年7月3日 经验分享
  • iphone12大小多少厘米 最新iPhone 12机身尺寸信息

    大家好,今天秦玉辉为大家带来了一些关于iphone12大小多少厘米,iPhone 12机身尺寸信息的专业知识,还有尺寸,机身,大小,信息,机型相关的实用干货和最新技巧分享,通过这篇文章,我希望能够为初学者提供一些实用的建议和技巧,让你更好地学习。 即将召开的苹果秋季新品发布会上将会为我们揭晓全新5G iPhone 12的真面目!此次iPhone 12系列将会…

    2023年10月3日 经验分享
  • oppo手机黑白屏怎么调回来 必懂:OPPO A92s的暗色模式设置方法

    大家好,今天周铃旨为大家带来了一些关于oppo手机黑白屏怎么调回来,OPPO A92s的暗色模式设置方法的专业知识,以及模式,方法,手机,时间,起止相关的实用干货和最新资讯分享,学习任何一门技术都需要从基础开始,这篇文章将会为你讲解一些基础知识。 晚上光线较暗的情况下玩手机时,白色背景太刺眼怎么办?快来试试OPPO A92s的暗色模式吧! 操作路径: 1、打…

    2023年11月10日
  • 天朗音响线怎么连接 附:音箱的连接方法

    很高兴又和各位见面了,今天杨若溪给大家分享一些关于天朗音响线怎么连接,音箱的连接方法的观点,还有关于音箱,方法,音响,功放,喇叭这些的最新实用干货和分享内容,认真思考总结之后,我决定写下这篇文章,希望能够为大家提供一些有用的建议和指导。 之前的文章写过关于喇叭线影响声音的分析,虽然那个影响不会特别大,但还是可闻的。当然你不对比也不会知道。有了喇叭线的基础原理…

    2023年10月6日 经验分享
  • 三星智能手机哪款性价比高 精选:详述三星Note20 Ultra参数

    美好的一天从这里开始,今天孙涵琪将和大家分享一些三星智能手机哪款性价比高,详述三星Note20 Ultra参数的实践经验,还有关于智能手机,性价比,参数,像素,新机等等各种实用干货和最新资讯,如果你刚刚开始学习这个领域,那么这篇文章将会给你带来很大的帮助。 手机更新换代很快,如今,三星Note20 Ultra还值得入手吗?实际上,三星Note20 Ultra…

    2023年5月24日 经验分享
  • 鸿蒙3.0好用还是2.0好用 精选:鸿蒙3.0系统详细分析

    HI,大家好,今天王秀宇要和大家分享一些有关鸿蒙3.0好用还是2.0好用,鸿蒙3.0系统详细分析的知识,还有关于鸿蒙,系统,开发者,官方,期待这些的实用干货和最新内容,通过这篇文章,我希望能够为初学者提供一些实用的建议和技巧,让你更好地学习。 谈起华为,你肯定会联想到麒麟、鸿蒙、Mate系列、P系列等,说实话在手机行业里,华为已经成为了一个流量大咖,不管是正…

    2023年5月19日 经验分享