自建博客文章链接：http://www.heblogs.cn/articleDetails/60fee38dc1e4a0695c1f8a7d
1. 微信小程序中new Date()转换时间时间格式时IOS不兼容的问题
问题：然后利用new Date() 转换时间戳时，使用微信开发工具、安卓都没问题，ios中无法展示并报错 “invalid date”。
原因：IOS系统及 Safari 不支持YYYY-DD-MM时间格式
解决办法： var d = new Date(TokenEndDate.replace(/-/g, “/”)) // 格式化时间
2. IOS机型margin属性无效问题
问题： 底部footer设置margin属性的时候发现真机IOS上无效，在微信开发者工具/安卓手机/谷歌iphone/安卓机型皆正常
原因： iOS8后，UIView 有个属性 var layoutMargins: UIEdgeInsets ， 如果一个View是ViewController的rootview，系统会自动设置和管理margins ， top和bottom margins被设置为0pt，left和right的值根据当前的 size class （文末简单介绍一下size class）不同而不同，可能取值为16或者20pt(iPhone6 plus, iPad)，你不能修改这些值
解决办法： footer底部加空div给height
3. input输入框在ios中光标及字体不居中
问题： input输入框在ios中光标及字体不居中
原因： 使用line-height垂直居中。
解决办法： 给input设置lineline-height来让输入内容居中或者上下偏移是不可取的，推荐使用padding撑开高度
input{
padding:30rpx;
&::placeholder {
font-size: 14px;
letter-spacing: 0.67px;
color: #fff;
}
}
4. m3u8视频格式，ios不能播放，安卓正常
问题 ：video 视频格式m3u8,在ios里边儿不能播放，但是安卓能正常播放
原因：xxx
解决办法： 添加 custom-cache={ {cache}} ,data 中添加 cache:false即可
<video src="{
{sbDress}}" controls custom-cache="{
{cache}}"></video>
5. 安卓/IOS图片卡顿异形
问题 ：安卓上图片会出现卡顿，变形，然后才会显示正常的图片大小
原因： image组件默认宽度300px、高度225px
解决办法： 使用image 标签，尽量固定宽高。
6. ios 表单元素 input 和textarea 默认有内阴影（H5）
input{
-webkit-appearance: none; }
7. 键盘弹出异常
问题： ios上键盘弹出会将页面往上顶 安卓显示正常
原因： ios上的软键盘会使页面的fixed定位失效。
解决办法： 可以监听resize事件（浏览器窗口大小调整时触发），当键盘弹出的时候，更改页面的position属性值。
let myFunction
let isIos = true
if (isIos) {
// 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起）
document.body.addEventListener('focusin', () => {
// 软键盘弹起事件
clearTimeout(myFunction)
})
document.body.addEventListener('focusout', () => {
// 软键盘关闭事件
clearTimeout(myFunction)
myFunction = setTimeout(function() {
window.scrollTo({
top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置
}, 200)
})
}
8. 安卓ios滑动 兼容问题
-webkit-overflow-scrolling: touch;
9. 安卓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");
};
})
10. ios安全区域适配
问题： 部分页面内自己手写的底部tabbar会被黑线挡住内容
原因： IPhone安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Homendicator)的影响。
解决办法：
# wx.setStorageSync获取机型
# wx.getSystemInfo 对比screenHeight和safeArea.bottom
# css函数env()、constant()适配