移动端开发中遇到的部分兼容性问题

• 关于禁止input标签获取焦点

  一般我们想到的就是 readonly="readonly", 但是在ios上这是不够的
  有几种情况是需要注意，(1) input 作为点击按钮勒类的标签，在ios上点击按钮时，依旧会获取焦点；(2) input 作为普通的只读输入框，在ios上，点击还是可以获取焦点

  解决办法:unselectable="on" onfocus="this.blur()" readonly="readonly"三个属性都加上

• 关于ios上将一串数字渲染位号码，并显示为蓝色的问题，ios这种默认做法是以为用户需要操作这一串数字，所以点击该数字时，它的webview会呼出内部组件

  解决办法:在head标签中加<meta name="format-detection" content="telephone=no"/>

• 在ios环境下input进行复制黏贴操作
  我们可能在电脑上复制黏贴，操作溜的飞起，但是丝毫没有去注意复制黏贴时，被操作的内容的转移存储是什么格式的，就算注意到了也可能没有去深思；那么我来解释一下，所有复制黏贴被操作的文本，在系统中为了节省内存，都是以最简单的格式--文本的方式保存的，所以你黏贴过去的不管的是Number类型的还是String类型的数据，系统都默认填充的是String类型的，
  问题来了，我的现实场景是：有一个话费充值的功能，用户不想手动输入，而直接从手机通讯录里面复制一个号码黏贴进去，提交操作使用的jQuery.validate进行校验，在安卓上和ios>V12没有问题，但是在ios<V12时，点击操作提交无效，依然显示号码栏没有输入，并且提交按钮点击无效。

  该兼容性受到input的type影响 当type="number"的时侯，低版本的iOS不能将黏贴进去的文本自动转化为number，所以提交的时候jQuery.validate不能获取到input的value值，所以导致报错而无法提交，

  解决办法:把可能需要进行复制黏贴操作的input标签的type设置为type="text"

• 在pc端的input进行复制黏贴操作
  在 pc端对type="text"的input经行同样的操作，出现的情况就有所不同，以下以我的自测的经历：
  环境：360极速浏览器，极速模式，
  操作：复制“xxx xxxx xxxx”的格式的号码填充至input输入框，使用jQuery.validate校验
  现象：发现超出了11位，很显然我们的复制操作并不会改变字符串的结构，那么我们就去掉中间的空格就行了，我只能说
  too young too simple,虽然去掉了空格，你依然会惊讶地发现input的value值的length为13，甚至是15
  解决办法：首先我们将input[type='text']改为input[type='number'],然后我们处理填充的字符串，我们使用toString()的方法将value值转化为字符串格式，然后使用trim()去掉字符串两端的空格，接着使用replace(/s\g/,'')将中间的空格都去掉，最后回填给input

            $(".Tel").on('input',function(){
             $(this).val($(this).val().trim().toString().replace(/\s/g,""));
            })
  

• 关于absolute定位和fixed定位的兼容性
  在ios<V12时，有使用fixed定位的弹窗，且弹窗中有输入框的时候，输入框的焦点会发生偏移，有些机子还会出现输入无效的情况，原因是ios系统在呼出软键盘的时候，会将页面上的弹窗等的fixed的定位属性改为absoluted定位, 整个弹出框上移，但是input的焦点还保留在原先的位置，所以input获取焦点的时候，焦点就发生了偏移，可能导致无法输入或者样式怪异

  解决办法:在弹出软键盘的时候使用js将相关的fixed定位都设置为absoluted

• 一般上拉/下拉加载/刷新的插件 如果被加载的内容中有按钮，可能导致页面的按钮点击事件失效
  解决办法:手动添加点击事件，添加tap事件，将window.location.href指向a的href的属性值

这个问题是我使用MUI上拉加载功能的时候发现的，另外还发现mui不能实现在同一个html文件中初始化多次，一般在swiper中需要加载多次，查看官方文档发现并有解决方案，我找到了一个好的解决办法实现了多次初始化的目的

• 禁止页面上下滑动 iOS和安卓通用
  在开发中，当有一些弹窗时，我们希望底部主题禁止被滑动，而当弹窗关闭的时候页面恢复滚动。

  解决办法:

    document.body.addEventListener('touchmove', function (e) {
       e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android

• 移动端的图片下载
  实现过程：H5的a标签增加了download属性，通过该属性，可以通过js操作将图片转译为数据流的格式，然后赋值给href属性，将文件名赋值给download属性，添加然后初始化鼠标事件，最后给a标签分发鼠标事件，
  问题：该download属性不支持safari浏览器和部分安卓环境，点击下载会发什么位置错误或者文件名未知，所以文件或者图片下载不支持采用a标签来下载。

    function downloadimage(event) {
        // 图片导出为 png 格式
        var type = 'png';
        // 返回一个包含JPG图片的<img>元素
        var img_png_src = canvasbox.toDataURL("image/png"); //将画板保存为图片格式的函数
        // 加工image data，替换mime type
        imgData = img_png_src.replace(_fixType(type), 'image/octet-stream');
        // 下载后的问题名
        var filename = 'yx_' + (new Date()).getTime() + '.' + type;
        // download
        saveFile(imgData, filename);
    }
    /**
     * 在本地进行文件保存
     * @param  {String} data     要保存到本地的图片数据
     * @param  {String} filename 文件名
     */
    var saveFile = function(data, filename) {
        //var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        var save_link = document.createElement('a');
        save_link.href = data;
        save_link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };

    /**
     * 获取mimeType
     * @param  {String} type the old mime-type
     * @return the new mime-type
     */
    var _fixType = function(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };