• ios、安卓的兼容性


    日期转换成时间戳:

    安卓下可以使用 Date.parse(new Date('2019-11-18 12:00:00')) 直接转换,结果为 1574049600000

    ios下 Date.parse(new Date('2019-11-18 12:00:00')) 无法转换,需要写成Date.parse(new Date('2019/11/18 12:00:00')) ,就是将“-”换成“/”,date=date.replace(/-/g, "/");

    兼容写法:

    Date.parse(new Date('2019-11-18 12:00:00'))||Date.parse(new Date('2019/11/18 12:00:00'))

    封装成函数:

    function formatTimeStamp (time) {
        return Date.parse(new Date('2019/11/18 12:00:00')) || Date.parse(new Date('2019-11-18 12:00:00'))
    }

    获取时间戳的三种方式:

    input框安卓下显示正常,ios下出现outline或者阴影

    解决办法:

    input:focus{outline:none}
    input:{-webkit-appearance: none;}

    flex布局中的flex-wrap:wrap属性在低版本安卓下不起作用,ios正常

    解决办法:低版本安卓使用其他方法代替,可以在需要换行的div外面包一个大的div

    ios会把数字当成电话,导致变色

    解决办法:

    在<head>标签中加入如下代码:

    <meta name="format-detection" content="telephone=no"> 
    <meta http-equiv="x-rim-auto-match" content="none">

    禁止安卓识别email

    解决办法:

    <meta content="email=no" name="format-detection" />

    input的placeholder属性会使文本位置偏上

    解决办法:

    line-height: (和input框的高度一样高)---pc端解决方法
    line-height:normal ---移动端解决方法

    input框type=number后,PC端聚焦时会出现上下箭头

    解决办法:

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }

    部分安卓手机点击图片会放大

    解决办法:

    img{ 
        pointer-events: none; // 这种方法会取消掉img标签的点击事件,如果需要点击事件,在外层盒子上添加点击事件
    } 

    ios10禁止页面缩放失效

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

    meta标签这样设置可以禁止大部分手机的页面缩放问题,但是ios10不行。解决办法:

    window.onload=function () { 
          禁止双击放大 
          document.addEventListener('touchstart',function (event) {  
                if(event.touches.length>1){  
                    event.preventDefault();  
                }  
            })  
            var lastTouchEnd=0;  
            document.addEventListener('touchend',function (event) {  
                var now=(new Date()).getTime();  
                if(now-lastTouchEnd<=300){  
                    event.preventDefault();  
                }  
                lastTouchEnd=now;  
            },false);
          禁止手势放大
          document.addEventListener('gesturestart', function (event) {
             event.preventDefault();
          });
    }

    禁止选中、复制文本

    .el {
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

    js跳转手机qq的聊天页面

    安卓

    mqqwpa://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

    ios

    mqq://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

    ios固定定位有bug

    检查html和body有没有设置overflow-x:hidden;

    给不同屏幕大小的手机设置特殊样式

    @media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

    input监听keyup事件,在安卓中是可以的,ios中支持不好

    解决办法:用input事件替代keyup事件

    ios下设置input样式会被默认样式覆盖

    解决办法:

    input,textarea {
      border: 0;
      -webkit-appearance: none;
    }

    打开相机并可选择相册功能兼容ios

    <input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
    
    
    $(function () {
        //获取浏览器的userAgent,并转化为小写
        var ua = navigator.userAgent.toLowerCase();
        //判断是否是苹果手机,是则是true
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
        if (isIos) {
            $("input:file").removeAttr("capture");
        };
    })

    H5的audio标签autoplay失效 

    解决办法:

    document.addEventListener('touchstart',function() {
      document.getElementsByTagName('audio')[0].play();
      document.getElementsByTagName('audio')[0].pause();
    });

    ios中,中文输入法输入英文时,字母之间会出现六分之一空格

    解决办法:

    this.value = this.value.replace(/u2006/g,'');

    ios下,横竖屏的字体加粗不一致

    解决办法:

    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    text-size-adjust:100%;

    安卓手机滚动条除了页面本身那个比较细长的滚动条外,还有一个又宽又短的

    解决办法:

         html, body {
            height: 100%;
            overflow: auto;
          }
          // 下面设置成body也可以,两者只需设置一个即可,但是上面的height必须都设置
          html::-webkit-scrollbar {
            display: none;
          }

    ios滑动卡顿问题

    当body设置height:100%;时,页面会卡顿,所以一般不这样设置,非要设置的时候,可以加上:

    -webkit-overflow-scrolling: touch;

      

  • 相关阅读:
    discuz对PHP7不支持mysql的兼容性处理
    mysql 5.6 设置root初始密码正确步骤,避免入坑
    当root用户无密码,非超级权限用户时提示mysqladmin: Can't turn off logging; error: 'Access denied; you need the SUPER privilege for this op解决方案
    部署 LAMP (CentOS 7.2),摘自阿里云,方便查看使用
    Win32 API编程:网络编程在设置WSAAsyncSelect模型后connect的返回值问题
    指针、指针变量梳理,取地址与取值运算
    C++/VC中ANSI与UNICODE中字符定义和函数对照表
    com.google.gson的SerializedName解决实体类与关键字的重名
    【Java】BigDecimal
    【MySQL】去重
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11883560.html
Copyright © 2020-2023  润新知