码迷,mamicode.com
首页 > 移动开发 > 详细

ios、安卓的兼容性

时间:2019-11-18 18:32:20      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:length   wpa   important   a标签   use   图片   点击事件   star   转换   

日期转换成时间戳:

安卓下可以使用 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、安卓的兼容性

标签:length   wpa   important   a标签   use   图片   点击事件   star   转换   

原文地址:https://www.cnblogs.com/wuqilang/p/11883560.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!