如何阻止移动设备(手机,pad)浏览器双击放大网页？

最新推荐文章于 2024-05-27 09:56:28 发布

rin9958

最新推荐文章于 2024-05-27 09:56:28 发布

阅读量7.9k

点赞数

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

在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的标签

转载自:http://www.9958.pw/post/html5_scalable

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

rin9958

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何阻止移动设备(手机,pad)浏览器双击放大网页？

如何阻止移动设备(手机,pad)浏览器双击放大网页？
复制链接

扫一扫

设置网页大小为手机端比例，双击不能放大或者缩小

weixin_33812433的博客

06-29

562

阻止手机浏览器双击放大的方法

qietuwang的博客

07-20

9720

切图网在为一个项目提供h5微信上使用的小游戏开发的时候，设计到快速点击按钮来发电的游戏规则，所以用户需要不断的点击按钮来发更多的电量，这不断的点击会触发双击的动作，浏览器就放大了。为了这个问题百度了很多资料，下面是主流的解决方案。 ----------------- 现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？在Mobile页面上有提供viewport

参与评论您还未登录，请先登录后发表或查看评论

探索高效编程新境界——Effective Modern C++

最新发布

gitblog_00023的博客

05-27

397

探索高效编程新境界——Effective Modern C++ Modern C++ 是一种强大的编程语言，以其高度的灵活性、性能优化及丰富的库支持而备受赞誉。为了帮助开发者更好地驾驭这一工具，我们推荐一个开源项目——Effective Modern C++，这是一个详尽的个人学习笔记，涵盖了从基础知识到高级特性的全面解读。项目地址:https://gitcode.com/downdemo/Ef...

禁止手机端浏览器双击放大功能

c15162的博客

07-09

2996

记录一下啊今天客户提要求手机浏览器打开网页时要禁止双击放大页面（Google）！！！然后在网上找到了很多但都没有效果，比如： <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,mini

手机浏览器页面点击不跳转（Android手机部分浏览器） 浏览器双击放大网页解决...

weixin_30481087的博客

07-01

1224

手机端web网页项目（angluar js 1.4.6） 1，网页项目开发过程中，使用PC浏览器能正常访问，IOS设备浏览器也能正常访问，但是使用Android部分浏览器进行访问的时候，链接偶尔不跳转，点击完没有任何反应（本人使用angluar js route进行单页面应用跳转），此时地址栏的路径已经被更新为点击后的地址. 解决方案：使用UC浏览器远程调试工具，在PC端chrome浏览...

如何阻止浏览器双击放大？

victoryckl的专栏

07-17

1万+

http://www.web-tinker.com/question/236.html 118.26.60.* 2013-01-07 17:49:12 现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？次碳酸钴 2013-01-07 18:00:57 在Mobile页面上有提供viewport这个meta，可以用它来设置缩放。但是在使用viewp

阻止移动设备(手机、pad)浏览器双击放大网页的方法

09-28

本文将详细介绍如何阻止移动设备（如手机、平板电脑）的浏览器双击放大网页。首先，我们需要理解移动设备浏览器中的`viewport`概念。`viewport`是指浏览器显示网页的实际可视区域，它可以小于或等于设备的屏幕尺寸...

QT移动设备(手机/PAD)tcp客户端连接主机tcp服务器

05-07

在使用QT进行移动设备（如手机或PAD）的TCP客户端连接到主机TCP服务器时，需要注意多个关键点以确保通信的顺利进行。以下是一份详细的指南，涵盖了从网络配置到编程实现的各个方面： **网络配置** 1. **同局域网...

JS判断是否手机或pad访问实现方法

11-27

JS判断是否手机或pad访问实现方法 S判断是否手机或pad访问方面的内容，对于利用JS判断是否手机或pad访问感兴趣的同学可以看下，直接上代码： [removed] /* * 智能机浏览器版本信息: * */ var browser={ ...

判断当前设备是Pad还是手机.txt

07-04

判断当前设备是Pad还是手机，根据其是否支持电话服务

js 禁用双指放大和禁用双击放大

why404

05-18

2289

禁用双指放大和禁用双击放大在h5页面中常常会禁掉用户将有页面放大操作找了一圈，找到这个方法有效 <script> // 禁用双指放大 document.documentElement.addEventListener( 'touchstart', function(event) { if (event.touches.length > 1) { event.preventDefault() } }, .

js 双指缩放，双指放大，双击放大，移动端双指放大缩小

07-11

双指缩放，图片双指缩放，在图片上有固定的坐标，并且点击固定坐标有相对应的事件触发，demo

vue移动端禁止双击放大

laoyaoshilaoyao的博客

07-14

1300

移动端页面禁止页面图片双击放大

禁止html5手机端双击页面放大的问题

xiaozhi_free的博客

06-01

4万+

制作手机端页面的时候我们都会加入一个meta标签，<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。其中 maximum-scale为允...

js禁止页面放大缩小

benrongyao的博客

08-03

1万+

转载：https://www.cnblogs.com/dearxinli/p/7645922.html <script type="text/javascript"> //阻止pc端浏览器缩放js代码 //由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮缩放页面的情况，只能通过js来控制了 $(d...

H5页面移动端双击屏幕禁止页面放大

qq_42708127的博客

07-20

1800

在meta标签中加入user-scalable=no属性 <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

禁止Html5在手机上屏幕页面缩放

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交