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


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

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

    安卓手机解决方案:

    <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端解决方案:

    注意:IOS端input字体最小为16px,否则系统会自动触发聚焦放大

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

      

    希望大家使用有效果可以留言支持,或者请我喝杯咖啡~

    很多坚持,是因为有肯定!

  • 相关阅读:
    Python爬虫连载1-urllib.request和chardet包使用方式
    Java连载69-接受输入、用数组模拟栈
    HTML连载61-焦点图、固定定位
    Java连载68-数组的拷贝、二维数组
    [Java] MVC
    [Java] JSP
    [Java] HTTP
    [设计模式] 设计模式课程(八)--抽象工厂模式
    [设计模式] 设计模式课程(七)--工厂模式
    [刷题] 75 Sort Colors
  • 原文地址:https://www.cnblogs.com/zhaohongcheng/p/11775688.html
Copyright © 2020-2023  润新知