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. JS 呼起和隐藏键盘（默认是需要用户点击输入框才能呼起）
呼起键盘：进入搜索页,要求键盘拉起。主要聚焦到input框就可以。（安卓上没有问题，ios上无效）
this.$refs.input.focus() // 在一个demo上安卓 和 ios都有效，但是正式项目中，ios中无效
隐藏键盘：通过给input标签，设置 readonly 属性就可以使键盘收起来了。（安卓上没有问题，ios上无效）
<input type="text" ref="input" :readonly="readonly">
或，下面的方法 安卓 和 ios上都有效
this.$refs.input.blur()
5. m3u8视频格式，ios不能播放，安卓正常
问题 ： video 视频格式m3u8,在ios里边儿不能播放，但是安卓能正常播放
原因： xxx
解决办法： 添加 custom-cache={{cache}} ,data 中添加 cache:false即可
<video src="{{sbDress}}" controls custom-cache="{{cache}}"></video>
6. 安卓/IOS图片卡顿异形
问题 ： 安卓上图片会出现卡顿，变形，然后才会显示正常的图片大小
原因： image组件默认宽度300px、高度225px
解决办法： 使用image 标签，尽量固定宽高。
7. ios 表单元素 input 和textarea 默认有内阴影（H5）
input{ -webkit-appearance: none; }
8. 键盘弹出异常
问题： 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) }) }
9. 安卓ios滑动 兼容问题
-webkit-overflow-scrolling: touch;
10. 安卓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"); };
})
11. ios安全区域适配
问题： 部分页面内自己手写的底部tabbar会被黑线挡住内容
原因： IPhone安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Homendicator)的影响。
# wx.setStorageSync获取机型
# wx.getSystemInfo 对比screenHeight和safeArea.bottom
# css函数env()、constant()适配
12. 页面返回时，页面不刷新
解决方案：使用vue路由的 vm.$router.replace() 方法跳转，或 原生的 location.replace(URL)
13.移动端1像素边框问题
注意：1、移动端1像素 问题，和视口大小没有关系。css中的像素是逻辑像素。
2、最后展示到屏幕上的是 物理像素 实现的，即 逻辑像素 经过计算，转化为 物理像素显示。
3、0.5px是有兼容性问题的，安卓手机 会把 0.5px 处理成 1px，显示还是比较粗的。
产生原因：在retina屏中，1个逻辑像素，可能需要2个或3个物理像素来显示。而px已经是css最小的逻辑像素单位，css中0.5像素会处理成0px。所以无法实现1px的物理像素渲染。
【注意：css中的px，是渲染在布局视口上的。是布局视口无法正常处理0.5px，布局视口的1px是可以渲染出0.5px的物理像素的】
解决方法：
1、0.5px 方案：可能手机厂商知道存在这个问题，所以现在有的手机已经可以实现0.5px渲染1px的物理像素了。在IOS8+，苹果系列都已经支持0.5px了，可以借助媒体查询来处理。
2、最佳解决方案：transform: scaleY(0.5); 【在一个方向缩小一半】
3、viewport + rem 【不推荐，这种方法，会给 规范的UI组件库带来样式错乱的问题。www.zhihu.com/question/27…】
<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
原理：将布局视口放大，布局视口 最后还是要全部呈现到 屏幕宽度的【即缩小】。如dpr=2时，这时候 css 中1px就是布局视口的1px，布局视口中的1px会被处理成 0.5px对应的物理像素进行渲染。
