H5页面手机端禁止缩放的正确方式

H5页面禁止手机端缩放是个常见问题了

首先说meta方式

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

这个写法一抓一大把，因为使用以后发现页面变形严重，很多人直接丢弃了该方式，实际上是由于width=device-width这一段代码引起的屏幕自适应

有些浏览器是强制开启允许缩放的，于是，使用js的方式在一定的延迟之后将该meta写入header中也是一种方法，但是有些浏览器是无效的

对于双击放大和双指放大，本质上是一种js，找了好久，找到了使用js禁止的方式，代码如下

禁止双指放大

document.documentElement.addEventListener('touchstart', function (event) {if (event.touches.length > 1) {event.preventDefault();}
}, false);

禁止双击放大

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {var now = Date.now();if (now - lastTouchEnd <= 300) {event.preventDefault();}lastTouchEnd = now;
}, false);

该方式在手机端适用良好，并且不影响第三方地图的缩放，建议使用

以上

转载于:https://www.cnblogs.com/liuyuhangCastle/p/10517067.html

H5页面手机端禁止缩放的正确方式相关推荐

h5页面手机端适配头
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, ...
解决手机端网页缩放问题
解决手机端网页缩放问题这个申明是移动设备用的,1:1显示设备屏幕大小,禁止缩放加到网页文件< head > 标签中 <meta name="viewport" ...
【H5】解决ios禁止缩放失效的方法
[H5]解决ios禁止缩放失效的方法参考文章: (1)[H5]解决ios禁止缩放失效的方法 (2)https://www.cnblogs.com/gentle-Lee/p/12154924.html ...
手机端设置缩放的解决方法和遇到的UC浏览器的坑
对于手机端来说,有时候h5界面是要禁止放大和缩小的. 那么如何解决这个问题呢,话不多说,我们直接说解决方法: 在index的首页之中,有把meta标签改成如下形式,就可以将用户缩放功能关闭了. < ...
html手机端禁止放大缩小
用手机端写了一个查看文件的界面,界面代码量很少,不繁琐但由于界面中加载的图片过大,每次双击放大或者手动放大缩小等都会引起页面的卡顿,于是乎想直截了当禁止放大缩小,代码很简单,但由于之前并未想到表示很悲 ...
h5实现手机端等级进度条
h5实现等级进度条需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...
大佬H5网页手机端怎么应用微信快捷登陆?
现在碰到这样一个问题,我PC端微信快捷登录已经实现,是扫码授权登陆,但是我们网站有手机端访问地址,类似于京东手机访问版本,是H5的形式,不是 APP,现在登陆这块也想弄一个微信快捷登陆,目前我在微信开 ...
手机查看html效果,使用IE浏览器查看页面手机端效果的方法
近期制作手机端页面比较多,经常会遇到在PC端模拟手机端样式的时候,一般情况下是用chrome进行模拟,但是也有的时候,我们可以用IE模拟,我讲的IE是win10里面的Edgee. 方法/步骤首先,我 ...
vue页面手机端开发总结
当图片的某元素是一张图片,可不设置宽高,将样式设置为如下,这样图片就会撑起来页面,避免一些宽高在不同机型不协调的问题. display: block; width: 100%; 需要条件判断显示不同的 ...
h5 /web 手机端实现保存图片到本地相册 uni-app
文章目录首先,必须得知道的事情是: uni-app中是有保存图片到本地相册的api的:但是h5并不适用手机浏览器长按图片会出现保存图片的按钮直接进行保存图片,甚至在微信中还可以进行扫一扫 H5Pl ...

H5页面手机端禁止缩放的正确方式

H5页面手机端禁止缩放的正确方式相关推荐

最新文章

热门文章