之前搞了一个移动端的H5项目，用的是webpack5+react18+react-router-dom(v6)都是比较新的技术，ios 兼容出了很多的问题 ，记录下
底部固定定位问题
底部tabbar 用position:fixed会出现遮挡，iPhone10之后底部会有一条横条，safari底部菜单栏会遮挡，菜单栏占用了高度，导致页面的高度不够，这个时候就要用
height: calc(100vh - 75px) !important;
通过js 判断是不是safari 如果是就加入上面的代码
弹窗问题
如果使用了固定定位
(position:fixed) 弹窗里面如果有输入框，弹窗的的内容就会乱，这个问题 只有ios 会 安卓并不会，只能将外层的固定定位 改成绝对定位(position:absoult)
input type='file' 时动态生成产生的问题
如果input type='file' 动态生成 或者display:'none' 因为权限问题ios 不允许拿到input里面的值（你可以选择相片，但是拿不到值）
网页点击输入框或者textarea会放大
单击 输入框 text area 会放大 可以用meta 标签取消 或者js 取消默认事件
<meta *name*="viewport" *content*="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
if(/Safari/.**test**(navigator.userAgent) && !/Chrome/.**test**(navigator.userAgent)){
localStorage.**setItem**('isSafari',1)
window.**onload** = function () {
*//e.preventDefault() --- 阻止默认事件*
*//当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。*
document.**addEventListener**('gesturestart', function (e) {
e.**preventDefault**();
});
*//在单个元素上单击两次 --- dblclick*
document.**addEventListener**('dblclick', function (e) {
e.**preventDefault**();
});
*//一个手指放在屏幕上时，会触发touchstart事件*
document.**addEventListener**('touchstart', function (event) {
if (event.touches.length > 1) {
event.**preventDefault**();
}
});
*//如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件*
*//但只要有一个手指移开，则会触发gestureend事件，紧接着又会触发toucheend事件。*
var lastTouchEnd = 0;
document.**addEventListener**('touchend', function (event) {
var now = (new **Date**()).**getTime**();
if (now - lastTouchEnd <= 300) {
event.**preventDefault**();
}
lastTouchEnd = now;
}, false);
};
}else{
localStorage.**setItem**('isSafari',0)
}
底部回弹会让底部的tabbar 文字不显示
因为 -webkit-overflow-scrolling: touch;ios 滚动流畅度很好，touch值拉动都会回弹，导致底部的tabbar 的文字会消失，我尝试了几个方法 都不行
1.滚动完用异步（setTimeout）重新渲染一次 --不行
2. 滚动完用异步（setTimeout）将定位改成绝对的再改回固定的 --不行
3. 禁用流畅 将所有的-webkit-overflow-scrolling 设置为auto -- 不行 页面太卡顿了 感觉很不舒服
4. 禁止某个页面流畅 --做不到
5. 使用插件禁用流畅滚动 --不行 一卡一卡的
最后查到文档
position:absolute;
z-index:1;
给 -webkit-overflow-scrolling: touch那个样式增加绝对定位 跟层 就可以了 底部的文字也会恢复显示,也不会影响到流畅滚动 这个应该是最完美的解决方法了
因为我没有苹果手机，我觉得有安卓模拟器 应该会有苹果模拟器吧，后来还真的找到了 黑雷苹果模拟器，不过 他ios 的版本比较低，iOS 9.2，打开我的项目 是空白的，不兼容 ，查了半天的资料
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie > 9"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"not dead",
"ie> 9"
]
},
//index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
重新删除node_modules文件夹，重新安装，然后重启，终于可以看到页面了
但是接口验证码显示不出来，估计是axios 用了一些高级语法不兼容，用vconsole 打印下报错先 发现 vconsole 根本就用不上 没反应 可能是版本比较高 后面让我找到另一个比较好的
<script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
<script>eruda.init();</script>
这个东西比vconsole全
这个问题 我之前没见过，查了一些文档，有的说是dom 的id 命名不正确，我除了root 是id其他的都是class
看到一个类似的问题，试了一下果然是这个问题，让我想起了之前弄小程序 因为api 后面有空格导致没请求，排查了一下午，ios 好像很讨厌空格
研究了一天 还是有收获的，加油！
