解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小

雨点打透心脏的1/2处 2023-06-25 04:48 30阅读 0赞

**一、需求问题**

在公司的项目开发中，我们经常需要开发移动端的项目。但是，在移动端中，点击输入框的时候，网页页面会自动放大或者缩小。这个也并不是我们所想要的，我们只需要向输入框中输入内容就可以了。

**二、需求分析**

针对移动端的这个问题，我们需要分两种情况进行考虑，安卓端和苹果端。如果是对于安卓手机端，我们可以设置名为`viewport`的`meta`标签，设置 `minimum-scale`、`maximum-scale`和`user-scalable`的值就可以了。如果是苹果手机端，只设置`meta`标签的一些值是不起作用的，解决不了移动端点击输入框自动放大缩小。这个时候，我们可以写一个js封装函数去解决，当页面加载完以后就会触发该函数。

**三、需求实现**

**1. 安卓手机端**

设置代码如下所示：

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

下面是对于一些参数的说明：

//在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内
    <meta name="viewport"
    
    // 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
     content="width=device-width,
    
    // 设置页面的初始缩放值，为一个数字，设置值为1.0
     initial-scale=1.0,
    
    //允许用户的最小缩放值，为一个数字，设置值为1.0
    
     minimum-scale=1.0,
    
    //允许用户的最大缩放值，为一个数字，设置值为1.0
     maximum-scale=1.0,
    
    //是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
    user-scalable=no"/>

**2. 苹果手机ios端**

设置的代码如下所示：

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关解决移动端项目中苹果ios和安卓android手机点击输入框网页页面自动放大缩小

一、需求问题在公司的项目开发中，我们经常需要开发移动端的项目。但是，在移动端中，点击输入框的时候，网页页面会自动放大或者缩小。这个也并不是我们所想要的，我们只需要向输入框中

雨点打透心脏的1/2处/ 2023年06月25日 04:48/ 0 赞/ 31 阅读

相关 ios端的H5页面点击输入框页面自动放大

H5页面，苹果手机点击input搜索框，输入内容时，页面会自动放大。解决： <meta name="viewport" content="width=device-wid

待我称王封你为后i/ 2023年06月15日 13:28/ 0 赞/ 26 阅读

相关 IOS手机上点击input 输入框，页面会自动放大

解决办法：使用禁止缩放页面来完成。 <meta name="viewport" content="width=device-width, initial-sc

怼烎@/ 2023年06月08日 06:57/ 0 赞/ 34 阅读

相关彻底完美解决安卓苹果手机点击输入框网页页面自动放大缩小

为了方便用户的查看浏览器在移动默认设置用户可以放大或者缩小，但是随着前端届的日新月异的变化，反而随意放大缩小成了我们需要解决的问题；安卓手机解决方案：

绝地灬酷狼/ 2023年03月12日 10:54/ 0 赞/ 1 阅读

相关 VUE_vue移动端禁止页面放大缩小

安卓：在 index.html 中添加 meta 标签。 <meta charset="utf-8"> <meta name="viewport" c

ゞ浴缸里的玫瑰/ 2023年01月15日 03:56/ 0 赞/ 198 阅读

相关移动端输入框，苹果手机无法输入，部分安卓手机获取焦点自动清空数据问题

1.苹果手机无法输入问题，解决办法：将 \\{ -webkit-user-select: none; -moz-user-select: none; u

╰半橙微兮°/ 2023年01月03日 14:26/ 0 赞/ 168 阅读

相关 iOS点击button放大后缩小效果

-(void)buttonClick{ button.transform = CGAffineTransformIdentity; [U

r囧r小猫/ 2022年07月12日 13:38/ 0 赞/ 318 阅读

相关浏览器调试移动端网页包括安卓和苹果两种设备

情景：手机浏览器上打开一个网页发现界面出错了，可在电脑浏览器上运行的明明很完美，但是我无法对手机浏览器上的页面进行审核元素；这可怎么调试啊，怎样才能知道它在哪里错了！解决方

红太狼/ 2022年05月22日 03:16/ 0 赞/ 463 阅读

相关 H5移动端放大缩小解决

> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal

比眉伴天荒/ 2022年03月01日 08:41/ 0 赞/ 510 阅读

相关解决 - vue移动端项目在IOS上点击输入框失效，需要点击多次

近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题，一、导致这个问题发生的原因是因为我在这个项目种使用了 FastClick ，它的作

谁践踏了优雅/ 2021年09月09日 02:24/ 0 赞/ 657 阅读