时间格式时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底部安全区适配
解决:文章来源:https://www.toymoban.com/news/detail-484641.html
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
记录贴,更多踩坑待补充。。。文章来源地址https://www.toymoban.com/news/detail-484641.html
到了这里,关于小程序开发安卓/ios兼容踩坑合集的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!