• iOS10 Safari不识别viewport禁用缩放的暴力解决方案


    移动设备升级到iOS10了,发现了自带的Safari浏览器不再识别meta viewport。以前我们都是用这个标签来让浏览器禁用缩放的。万恶的Apple~~

    网上看到了一段解决方案,测试了一下确实不错,就拿来了。
    在iOS10之前都是通过

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

    来强制不让手机浏览器缩放的,但是升级到iOS10后Safari不再识别这个meta标签。所以得用js来hack一下:
    禁用双指缩放

    document.documentElement.addEventListener('touchstart', function (event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    }, false);

    禁用手指双击缩放

    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
      var now = Date.now();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    }, false);

    当然,我测试,如果在iOS10的Safari中设置了viewport,其实双击放大也是不生效的,所以个人觉得在iOS10上比较好的解决方案是先设置viewport,然后再用js禁用双指缩放即可,无需再设置禁用双击缩放

    同时给出这个解决方案的作者还提出了一个有情提示,如果任何一个子元素的touch事件设置了stopPropagation阻止事件冒泡的话,可能还是会失效,而且在iOS10中你的输入框字体最好不要小于16px,否则iOS在输入框获得焦点时可能还是会强制放大。

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

    安卓是可以禁用缩放,而IOS不能禁用缩放,所以更加的方案是判断此时的设备是不是IOS苹果机型,如下代码 1 // 禁用IOS双指缩放, 安卓则不需要下面这个段代码

    
    
     1     // 禁用IOS双指缩放和双击缩放, 安卓则不需要下面这个段代码
     2    
     3    (function() {
     4             var agent = navigator.userAgent.toLowerCase();        //检测是否是ios
     5 
     6             if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
     7                 
     8                 // 禁用双指缩放
     9                 document.documentElement.addEventListener('touchstart', function (event) {
    10                     if (event.touches.length > 1) {
    11                         event.preventDefault();
    12                     }
    13                 }, false);
    14                 
    15                 // 禁用双击缩放
    16                 var lastTouchEnd=0;  
    17                 document.addEventListener('touchend',function (event) {  
    18                     var now=(new Date()).getTime();  
    19                     if(now-lastTouchEnd<=300){  
    20                         event.preventDefault();  
    21                     }  
    22                     lastTouchEnd=now;  
    23                 },false)  
    24             } 
    25    })()
    
    
    
     
  • 相关阅读:
    解决RobotFramework的关键字不能高亮的问题
    使用Python遇到:'utf-8' codec can't decode byte 0x8b in position 1: invalid start byte 问题
    通过Jekins执行bat脚本始终无法完成
    Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/core"
    [转]The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
    HDU 2686 MCMF
    HDU 4278 卡特兰,区间DP
    POJ 2985 名次树
    POJ 2531 深搜剪枝
    Uva 10061 进制问题
  • 原文地址:https://www.cnblogs.com/tian-long/p/8530059.html
Copyright © 2020-2023  润新知