ios、安卓的兼容性

时间：2021-09-12 05:46:59

日期转换成时间戳：

安卓下可以使用 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‘))
}

获取时间戳的三种方式：

ios、安卓的兼容性

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

　　

 

相关文章