1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 安卓与ios兼容性问题解决

安卓与ios兼容性问题解决

时间:2021-12-04 10:26:19

相关推荐

安卓与ios兼容性问题解决

1、new Date获取时间戳

在安卓机上new Date('-9-10')可以成功获取时间戳,ios无法获取

处理方法: 将字符串中-替换成/,.replace(/\-/g,'');

2、点击复制功能

安卓和ios是不同的实现方式,详见我之前的一篇博客

/weixin_39327883/article/details/89207116

3、input获取焦点

安卓获取焦点弹起键盘后再失去焦点,页面成功复原

ios失去焦点后页面无法回滚和复原,需要手动重置一下scrolltop

4、input边框背景问题

安卓和ios将背景和边框设为透明兼容性写法

兼容写法:background:transparent; FILTER:alpha(opacity=0);border:none;

5、input选择图片

<input type="file" accept="image/*" capture="camera">

安卓如果要支持相册和拍照需要有capture属性

ios需要将capture属性去掉(removeAttribute)

6、video标签

由于微信浏览器安卓和ios的内核不同,安卓为x5内核,ios为chrome内核,导致video视频在安卓播放时会强制全屏并且在最高层级,所以我自己的处理方法是视频暂停时先将video标签隐藏,显示出页面其他元素。

7.禁止复制、选中文本

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

8.上下拉动滚动条时卡顿、慢(未测试)

body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

9.清除button,input,a标签的默认样式

a:hover, a:active,button,input:focus{outline: none;border: none;}

10.禁止图片点击放大

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

img{ pointer-events: none; }

这个会让img标签的点击事件失效,如果想要给图片添加点击事件就要给上面再写一层

11.禁止页面缩放

这样设置在ios10系统中是失效的,如果需要禁止ios缩放,下面代码亲测有用

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();});}

本文参考了其他博客等资料

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。