原生app内嵌H5页面，禁止页面缩放，双击放大，滚动过程中缩放

就等故事经过

已于 2022-08-15 15:58:07 修改

阅读量1.8k

点赞数 5

文章标签： javascript 前端开发语言

于 2022-08-15 15:54:39 首次发布

本文链接：https://blog.csdn.net/jiudenggushijingguo/article/details/126348202

版权

背景

写了一个原生app内嵌h5的页面，产品提出页面不可以进行缩放。

面向百度编程

H5缩放有两种：

双击缩放；
双指手势缩放。

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

解决方式直接上代码：

window.onload = function() {
   // 禁用双指放大
   document.addEventListener('touchstart',function (event) {
       if(event.touches.length>1){
           event.preventDefault();
       }
   });
   // 禁用双击放大
   let lastTouchEnd=0;
   document.addEventListener('touchend',function (event) {
       const now=(new Date()).getTime();
       if(now-lastTouchEnd<=300){
           event.preventDefault();
       }
       lastTouchEnd=now;
   },false);
   document.addEventListener('gesturestart', function (event) {
       event.preventDefault();
   });
}

至此已经解决了 双击放大、 双指缩放的问题了。

没想到测试提出了在页面滑动过程中页面也可以缩放的问题。翻遍了类似所有的百度文章都没有解决方案，于是看到项目中的另外一个项目也是内嵌到app中的页面，竟然在滚动过程中不可以缩放，于是去研究了一下，发现是布局不一样(他的布局写的有点恶心)，于是受此启发，将body的scroll转移到app容器中(我的是Vue项目)。于是有以下修改：

// 在public  index.html中修改
// 将body的scroll转移到app容器中
// 猜测是ios中body的scroll事件可以触发双指的手势操作，而其他容器不行，这样就解决了在滑动过程中的缩放问题
<body style="height: 100vh; width: 100vw;overflow: hidden;">
<div id="app" style="height: 100vh; width: 100vw; overflow: scroll;"></div>