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();});}
本文参考了其他博客等资料