小程序开发安卓/ios兼容踩坑合集

时间格式时IOS不兼容的问题

原因：iOS系统不能识别XXXX-XX-XX（2020-05-20 12:00:00）格式的，需要将格式转换成 2020/05/20
12:00:00

解决：

var date1 ="2020-05-20 12:00:00"
date1 = date1.replace(/-/g, '/');
console.log(date1) //2020/05/20 12:00:00

margin在IOS真机中失效

情境：在页面中元素使用margin值，在某些IOS设备下会出现失效的情况，而安卓机则正常显示。

解决：此问题暂无直接的解决方案，当前使用空DIV控制间距。
本人实际项目中因为涉及到的是样式问题因此最终以判断真机是否为iOS平台而动态加载样式解决，有更好的解决方案或者知道问题所在的朋友欢迎评论区留言指教

input 选择文字更多文字向下滑动，键盘消失问题

情境：input框中选择文字更多的时候向下滑动键盘会消失。

解决：always-embed=“{{true}}”

<input type="text" placeholder="请输入搜索内容" confirm-type="search" placeholder-class="placeholder" value="{{inputValue}}" always-embed="{{true}}" />

input的placeholder属性字体不居中/输入内容不居中

解决:
1、设置line-height及font-size
2、对input设置高度

页面滚动卡顿

解决：设置-webkit-overflow-scrolling:touch;

隐藏scroll-view滚动条

解决：样式中设置

::-webkit-scrollbar{
	width: 0;
	height: 0;
	color: transparent;
}

视频播放格式问题

<video src="{{videoSrc}}" controls   custom-cache="{{cache}}"></video>
cache：false

ios 表单元素 input 和textarea 默认有内阴影

解决：

 input{  -webkit-appearance: none; } 

ios键盘弹出导致页面显示异常

原因： ios上的软键盘会使页面的fixed定位失效。

解决办法： 可以监听resize事件（浏览器窗口大小调整时触发），当键盘弹出的时候，更改页面的position属性值。

安卓ios打开相机选择相册

解决：

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
    //获取浏览器的userAgent,并转化为小写
    var ua = navigator.userAgent.toLowerCase();
    //判断是否是苹果手机，是则是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

ios底部安全区适配

解决：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

记录贴，更多踩坑待补充。。。