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

绝地灬酷狼 2023-03-12 10:54 18阅读 0赞

## 为了方便用户的查看浏览器在移动默认设置用户可以放大或者缩小， ##

## 但是随着前端届的日新月异的变化，反而随意放大缩小成了我们需要解决的问题； ##

安卓手机解决方案：

<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,
    
    // 设置页面的初始缩放值，为一个数字，可以带小数
     initial-scale=1.0,
    
    //允许用户的最小缩放值，为一个数字，可以带小数
    
     minimum-scale=1.0,
    
    //允许用户的最大缩放值，为一个数字，可以带小数
     maximum-scale=1.0,
    
    //是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
    user-scalable=no"/>

## 　 ##

### 其实使用meta标签可以解决安卓手机的的放啊或者缩小的问题，但是meta标签在苹果手机上的作用却是 const meta = 0(哈哈，就是没有作用)苹果手机还有点击input输入框自动放大的功能，认为这样用户体验好。 ###

###  ###

### 其实不然，这也是我们煞费苦心需要解决，这时候使用meta=viewport,是没有效果的，我们网上千奇百怪的方法感觉都没有效果，这里向大家分享一下，终极干货，使用JS使IOS无法缩小放大； ###

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 条评论，18人围观）

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

相关阅读

相关安卓手机怎么连苹果电脑？

安卓手机快速连接苹果mac电脑，轻松传输文件，快速调试开发。这里我推荐一款第三方的软件–魔方手机助手参考[https://zh

阳光穿透心脏的1/2处/ 2023年07月14日 11:59/ 0 赞/ 43 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关苹果短信迁移到安卓手机

苹果短信迁移到安卓手机最近换了安卓手机，需要把苹果上的短信等资料迁移到安卓手机。确实比较麻烦。实测以下[链接][Link 1]可行。主要是两步走 1. 提

亦凉/ 2022年10月24日 13:27/ 0 赞/ 525 阅读

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

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

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

相关放大/ 缩小浏览器页面（或在线网页）

问题：在线编辑 csdn 文本，在线绘图，有时需要放大浏览器页面解决办法：同时按 Ctrl 和＋,表示放大同时按 Ctrl 和－, 表示

你的名字/ 2022年04月21日 14:50/ 0 赞/ 168 阅读

相关点击增加输入框

js: function insertTag(num)\{ var address=document.getElementById("tag"); var i=a

朱雀/ 2021年09月10日 06:58/ 0 赞/ 495 阅读