移动端JS阻止浏览器放大（chrome、safari、华为三星安卓原生）

最新推荐文章于 2024-05-07 15:11:56 发布

jiayaner

最新推荐文章于 2024-05-07 15:11:56 发布

阅读量1.5k

点赞数

分类专栏：小问题文章标签： javascript

本文链接：https://blog.csdn.net/jiayaner/article/details/113616041

版权

小问题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题描述

移动端的浏览器有默认的事件，如手势缩放事件、双击放大事件。但有时候会因为一些特殊原因，页面放大会有问题。已知viewport的设置对新ios无效（双击、手势均无效），viewport设置对部分原生浏览器的无效（双击有效，手势无效）。

解决方案

参考网上的方案，下面两段代码配合可以解决iso的safari、chrome和安卓chrome

 <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

document.addEventListener("gesturestart", function (event) {
	event.preventDefault();
});


document.addEventListener("dblclick", function (event) {
	event.preventDefault();
});


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

但是，还是被测试发现华为原生浏览器和三星的原生浏览器不行，还是可以手势放大。直接给document的各种事件阻止默认也不行。后来参考以前遇到的问题，想到的办法就是，在body下把所有内容包在div里，div占满屏，给div添加touchmove事件，阻止冒泡到document层，完美解决，也不影响div里面其他元素的touchmove事件。

<body>
	<div id="test"></div>
</body>

html,body,#test{
	width:100%;
	height:100%;
}

document.getElementById("test").addEventListener("touchmove", function (e) {
	e.stopPropagation();
	// e.preventDefault(); 默认事件可以自行考虑加不加
},false);

测试机型

iphone safari
iphone chrome
华为 chrome
华为原生
三星 chrome
三星原生

潜在问题

在比较极端的情况下，如页面的执行还没到这段代码的时候，用户已经在缩放了，那这种是没有办法处理的，而且一旦这种情况发生，在页面加载完后，用户将没有办法缩回页面，就有点尴尬……

jiayaner

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
移动端JS阻止浏览器放大（chrome、safari、华为三星安卓原生）

问题描述移动端的浏览器有默认的事件，如手势缩放事件、双击放大事件。但有时候会因为一些特殊原因，页面放大会有问题。已知viewport的设置对新ios无效（双击、手势均无效），viewport设置对部分原生浏览器的无效（双击有效，手势无效）。解决方案参考网上的方案，下面两段代码配合可以解决iso的safari、chrome和安卓chrome <meta name="viewport" content="width=device-width,initial-scale=1, minimum-sca
复制链接

扫一扫