手机端兼容问题

ios兼容问题

1，ios底部安全区问题

解决办法： 在 index.html 的 head 标签中加入以下 meta，在index.css加入以下样式开启底部安全区适配。

# wx.setStorageSync获取机型 
# wx.getSystemInfo 对比screenHeight和safeArea.bottom
# css函数env()、constant()适配
/**
 * 判断IOS机型
 */
export function isIphoneX(){
  if (typeof window !== 'undefined' && window) {
    var faultTolerantVal = 10; // 容错值
    return /iphone/gi.test(window.navigator.userAgent) && (window.screen.height + faultTolerantVal) >= 812;
  }
  return false;
};

//css需要添加如下
.safe-area-inset-bottom{
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
//前提是viewport-fit=cover
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, 
  maximum-scale=1.0, minimum-scale=1.0,
  viewport-fit=cover"
/>

2，ios日期格式问题

ios日期报错
解决方法：改用new Date(2023/11/29),因为ios无法识别日期带“-”。

3，ios使用this.router.go(0)不生效

解决办法: 使用window.location.reload()方法代替

4，ios使用input 无法上传图片

<input type="file" accept="image/jpeg, image/x-png, image/gif" capture="camera">

解决办法：将input内accept属性改为accept=”image/*”

5，ios点击事件延迟300ms问题

解决办法：使用fastclick插件

    document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
    }, false);

6，input输入框在ios中光标及字体不居中

解决方法： 给input使用padding撑开高度

input{
	padding：30px；
}

7，安卓移动端设置line-height = height字体不居中

解决办法: 设置line-height: normal;