Jqk

在逐梦的路上,总会有人的梦想枯萎,只有提升自我才可以涅槃重生

0%

移动开发IOS和安卓遇到的兼容性问题

1.JavaScript中的Date对象在Safari与IOS中的坑

1
var date =new Date("2018-07-25 19:25");

这段代码是获得字符中指定的日期,它Firefox、Chrome中就能运行,但是放在Safari就会报错,错误是NaN
解决办法:

1
2
3
//将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 
var value = '2018-07-25 19:25';
value = value.replace(/\-/g, "/");
**2.禁止图片点击放大**

部分安卓手机点击图片会放大,如需要禁止放大,只需要设置css属性

1
2
3
img{ 
pointer-events: none;
}

这个会让img标签的点击事件失效,如果想要给图片添加点击事件就要给上面再写一层
3.禁止页面缩放
这样设置在ios10系统中是失效的,如果需要禁止ios缩放,下面代码亲测有用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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();
});
}

4.禁止 iOS 识别长串数字为电话

1
<meta name="format-detection" content="telephone=no">

5.禁止复制、选中文本

1
设置CSS属性 -webkit-user-select:none

6.JS跳转手机QQ的聊天页面

1
2
3
4
//Android: URL
mqqwpa://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web
//IOS: URL
mqq://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

7.一些情况下对非可点击元素如(label,span)监听点击事件,不会在IOS下触发,css增加cursor:pointer就搞定了
8.上下拉动滚动条时卡顿、慢(未测试)

1
2
3
4
5
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
9.清除button,input,a标签的默认样式

1
2
3
4
a:hover, a:active,button,input:focus{
outline: none;
border: none;
}
-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!