移动端禁止页面缩放问题

关注

原创最新推荐文章于 2026-07-09 12:56:05 发布 1k 阅读 AI 写同款· GEO 优化 ›

【案例篇1】移动端H5网页在ios滑动不流畅和禁止缩放问题最近开发小程序，有一个富文本展示页面使用的是H5网页嵌入的，当你用 overflow-y:scroll属性的时候，内容超出容器溢出滚动的效果很迟顿，特别是在IOS系统中，而且页面还会缩放。修改meta标签即可控制页面缩放及是否缩放 touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比；阅读详情

第一步：

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

第二步：

     window.onload = function () {
        document.addEventListener('gesturestart', function (e) {
            e.preventDefault();
        });
        //以上是禁止双指缩放
        //以下是禁止双击缩放
        document.addEventListener('touchstart', function (e) {
            if (e.touches.length > 1) {
                e.preventDefault();
            }
        });
        var endTouch = 0;
        document.addEventListener('touchend', function (e) {
            var nowTouch = (new Date()).getTime();
            if (nowTouch - endTouch<= 300) { //为什么是300，看注意
                e.preventDefault();
            }
            endTouch = nowTouch ;
        }, false);
    };

注意：
点击穿透问题：移动端click比touchstart/touchend会有大约300ms延迟，浏览器会在点击后等待300ms去判断是否用户多次点击，300ms内有多次点击就判定为不是单击事件。

收录于