解决在苹果手机移动端点击输入框时页面会放大的情况

爱吃鱼的锅包肉

已于 2024-05-06 09:52:55 修改

阅读量360

点赞数 1

分类专栏： HTML+CSS3 文章标签：智能手机 android javascript

于 2024-04-26 14:06:27 首次发布

本文链接：https://blog.csdn.net/m0_37618883/article/details/138217037

版权

HTML+CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文讲述了在开发手机移动端应用时遇到的苹果端双击输入框放大问题，通过在head中添加viewport元标签在安卓上解决，而在iOS上需使用JavaScript代码，包括touchstart、gesturestart等事件处理，成功防止了页面放大。

摘要由CSDN通过智能技术生成

近期开做手机移动端时，发现快速双击输入框时，在苹果端会有页面放大的现象，为此特别做了相应处理，并解决了问题。

安卓手机很好解决，其解决方案为在head头部添加以下代码：

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

但此方式在IOS移动端并不起作用，为了能适配IOS系统，需要加入 javascript 代码：

<script>
    // 当页面加载完成后触发该函数
    window.onload = function () {

        // e.preventDefault()  ===    阻止默认事件

        // 当一个手指放在屏幕上时，会触发 touchstart 事件。如 果另一个手指又放在了屏幕上，则会先触发 gesturestart 事件
        document.addEventListener('gesturestart', function (e) {
            e.preventDefault();
        });

        // 在单个元素上单击两次 ===  dblclick
        document.addEventListener('dblclick', function (e) {
            e.preventDefault();
        });

        // 一个手指放在屏幕上时，会触发 touchstart 事件
        document.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        });

        // 如果一个或两个手指在屏幕上滑动，将会触发 gesturechange 事件。
        // 但只要有一个手指移开， 就会触发 gestureend 事件，紧接着又会触发基于该手指的 touchend 事件。
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
            var now = (new Date()).getTime();
            // 如果在300ms内触发两次touchend，就阻止默认事件
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    };

</script>

这样一来，苹果移动端的双击放大页面的问题就解决了，亲测有效！