移动端H5页面如何屏蔽双击缩放的功能？

发布于 2022-09-06 06:49:53 字数 328 浏览 20 评论 0

移动端H5屏蔽双击缩放，网上能搜到的说法大多是要添加viewport属性

<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

但实际上并没有解决问题，不知道是网上以讹传讹还是我的打开姿势有问题？亦或者是我的工作环境有问题？我在项目里使用了flexible移动端适配方案。有哪位解决过这个问题的朋友回答下吧！拜谢！

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

表情可笑 2022-09-13 06:49:53

我在我们的页面中加了很多，除了ios10以上的safari不兼容以外还没有遇到过不兼容的情况

 <!-- 视图窗口，移动端特属的标签。 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 忽略页面中的数字识别为电话号码,email识别 -->
    <meta name="format-detection"content="telephone=no, email=no" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app"> 
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

回复收藏 0

再浓的妆也掩不了殇 2022-09-13 06:49:53

回复收藏 0

謸气贵蔟 2022-09-13 06:49:53

页面的DOCTYPE改为

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

head的meta改为

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

回复收藏 0

~没有更多了~

关于作者

完美的未来在梦里

暂无简介

0 文章

0 评论

23 人气

关注发私信

烙印

文章 0 评论 0

关注

singlesman

文章 0 评论 0

关注

给自己一个微笑

文章 0 评论 0

关注

独孤求败

文章 0 评论 0

关注

晨钟暮鼓

文章 0 评论 0

关注

我是自愿种绣球花的

文章 0 评论 0

友情链接

文江博客

移动端H5页面如何屏蔽双击缩放的功能？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

移动端H5页面如何屏蔽双击缩放的功能？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。