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

最新推荐文章于 2024-05-11 09:31:19 发布
最新推荐文章于 2024-05-11 09:31:19 发布
阅读量774 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44324124/article/details/107383962
版权

制作手机端页面的时候我们都会加入一个meta标签，
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

其中 maximum-scale为允许用户的最大缩放值，user-scalable为是否允许用户进行缩放，yes(默认)代表允许，no(0)代表不允许，两者结合使用可以阻止页面被放大（经测试，少一项都达不到效果）
 

 vue项目打包后，找到dist文件夹下的index.html，替换meta标签

wgod
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
禁止html5手机端双击页面放大的问题，主要针对苹果手机
u012201879的博客
01-14 2660
目前在vue项目中，发现使用vant框架的文本框输入组件，在苹果手机上出现触发文本框输入页面会放大，以下是解决方法： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ...
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
09-02
在移动设备上，尤其是使用Android系统的手机，可能会遇到一个常见的问题：手机浏览器页面点击不跳转，同时双击页面时会触发网页放大功能。这个问题在Angular JS 1.4.6版本的单页面应用中尤为突出，尽管在PC浏览器和...
html手机网页不可放大,阻止移动设备(手机、pad)浏览器双击放大网页的方
weixin_39875419的博客
06-11 1027
点评：这篇文章主要介绍了阻止移动设备(手机、pad)浏览器双击放大网页的方法,需要的朋友可以参考下现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？在Mobile页面上有提供viewport这个meta，可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明，移动设备要用下...
完美解决 ios10 及以上 Safari 无法禁止缩放的问题
weixin_30929011的博客
04-10 500
在 iOS 10之前，iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放：<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />但 iOS 10开始，meta 设置在 Safari 内无效了。 所...
H5禁止用户双指放大
最新发布
qq_44862552的博客
05-11 468
通过以上方法可以有效地禁止用户双指放大页面内容。
h5页面在移动端禁止缩放，双击放大，双指放大
qq_38179746的博客
11-17 3704
h5的页面在手机浏览器，或者微信里面访问时，有时候不小心点了，页面就变大了 就像这样 需要在js里面添加方法 将如下代码拷贝就OK了 // 禁用缩放 function addMeta() { $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minim...
html js控制手指缩放,移动端手指放大缩小插件与js源码
weixin_39761481的博客
06-20 344
缩放#box{width:100px;height:100px;background: red;}html,body{width:100%;height:100%; overflow:hidden;}document.addEventListener('DOMContentLoaded',function() {var c=1;//先定义一个初始值var oBox=document.getElem...
html 禁止移动端默认双指拖动缩放事件
PrimaryColor
02-24 1556
禁止缩放可以使用如下比较方便的写法。当然你也可以绑定body身上的拖动事件，通过e.preventDefault();阻止他的默认行为，不过这种方法会把一些功能给屏蔽掉，不推荐： <metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=0"> ...
阻止移动设备(手机、pad)浏览器双击放大网页的方法
09-28
本文将详细介绍如何阻止移动设备（如手机、平板电脑）的浏览器双击放大网页。 首先，我们需要理解移动设备浏览器中的`viewport`概念。`viewport`是指浏览器显示网页的实际可视区域，它可以小于或等于设备的屏幕尺寸...
HTML5添加禁止缩放功能
12-14
下面一段代码给大家介绍了html5添加禁止缩放功能，具体代码如下所示： ...最近测试html5页面，发现默认都允许用户缩放页面，或者在屏幕双击放大或缩小。即相当于这样设置 <meta name="viewport" content="wid
禁用IE 11浏览网页触屏双击放大功能 解决IE双击放大问题
05-10
通过自定义样式表或者组策略解决IE11浏览网页双击放大的问题，禁用IE双击放大的功能，避免玩游戏时的烦恼。 其中自定义样式表方式有一键配置bat，用起来很简单，将DisableIEScaleOnDClick.bat复制到合适的用于保存...
触摸屏资料 禁用右键 缩放 双击缩放
10-31
触摸屏资料css 禁用右键 缩放 双击缩放 win8下IE10确认可以禁用右键 缩放 双击缩放 其他的未知 使用方法见我的博客 http: blog csdn net lackdaylad article details 40616709
vue+html移动端防止双击变大。
ygbwan的博客
08-08 420
代码】移动端防止双击变大。
HTML禁止页面双击放大
小白白的博客
10-22 1414
把<head>里面的 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 替换成 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
前端移动端禁止页面双指放大，双击放大，等缩放
weixin_34849724的博客
03-13 3005
// 禁用缩放 function addMeta() { $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />'); } setTimeout(addMeta, 3000); // 禁用双指放大 document.documentElement.addEventLis...
H5页面手机端禁止缩放
Xi9221的博客
08-21 2256
这个写法一抓一大把，因为使用以后发现页面变形严重，很多人直接丢弃了该方式，实际上是由于width=device-width这一段代码引起的屏幕自适应。有些浏览器是强制开启允许缩放的，于是，使用js的方式在一定的延迟之后将该meta写入header中也是一种方法，但是有些浏览器是无效的。对于双击放大和双指放大，本质上是一种js，找了好久，找到了使用js禁止的方式，代码如下。该方式在手机端适用良好，并且不影响第三方地图的缩放，建议使用。H5页面禁止手机端缩放是个常见问题了。
html5 手机页面 允许放大,阻止移动设备(手机、pad)浏览器双击放大网页的方法
weixin_39862871的博客
06-03 2454
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置，怎么让双击不放大？在Mobile页面上有提供viewport这个meta，可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明，移动设备要用下面这个声明。复制代码代码如下:设置了DTD之后就可以使用viewport使页面禁止缩放了。 通常把...
html手机端禁止放大缩小
热门推荐
在路上的小马达
01-11 1万+
        用手机端写了一个查看文件的界面，界面代码量很少，不繁琐但由于界面中加载的图片过大，每次双击放大或者手动放大缩小等都会引起页面的卡顿，于是乎想直截了当禁止放大缩小，代码很简单，但由于之前并未想到表示很悲伤。。。 问题描述：无法禁止html界面的放大缩小功能，使用的是html5界面，百度了挺久一开始并未发现类似问题，怀疑是Js库导致，但结果是与Js无关，于是想到可能是哪里标签等未设置，...
html页面，怎么实现双击放大图片，缩小图片
04-19
？这是一个技术问题，我可以回答。你可以使用JavaScript代码，在图片被双击时，改变图片的...这段代码会在双击图片时检查图片是否已经放大，如果已经放大，则会将宽度和高度改为原始大小，否则会将宽度和高度放大两倍。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值