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

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

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

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


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

    解决办法:在head标签中加


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

    该兼容性受到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

    解决办法:在弹出软键盘的时候使用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图片的元素
        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;
    };

你可能感兴趣的:(移动端开发中遇到的部分兼容性问题)