前端H5 移动端问题收集

前端H5 移动端问题收集

本文章会定期更新，欢迎大家探讨与学习

一、ios历史回退返回页面，页面不会刷新

先通过navigatior.userAgent 判断是不是ios环境

    window.addeventListener("pageShow", function() {
        location.reload();
    })

二、ios低版本不支持零宽断言，并且js低版本也不兼容

1、零宽度正预测先行断言

（?=exp），断言自身出现的位置的后面能匹配表达式exp。

2、零宽度正回顾后发断言

（?<=exp），它断言自身出现的位置的前面能匹配表达式exp。

3、零宽度负预测先行断言

（?!exp），断言此位置的后面不能匹配表达式exp。

4、零宽度负回顾后发断言

（?<!exp），断言此位置的后面不能匹配表达式exp。

三、ios手机底部安全区域问题

.container {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-insert-bottom);
    padding-bottom: env(safe-area-insert-bottom);
}

四、ios路由跳转后，执行物理返回操作，页面展示异常

原因：物理返回后，ios的页面不会刷新，页面会展示缓存内容。

window.addEventListener("pagehide", funciton() {
    // 存储缓存等操作
    ......
})

window.addEventListener("pageshow", funciton() {
    // 页面刷新与组件重载操作
    ......
})

五、安卓混合开发中，系统的软键盘不会将webview内容顶上去，导致把输入框给遮挡住。

当app或者是交互的SDK设置webview的属性了 windowSoftInputMode="adjustResize" 时，软键盘才不会会将webview内容遮挡，此问题有三种方案：

1. 修改app webview属性 即windowSoftInputMode="adjustResize"
2. 修改SDK创建的webview属性 windowSoftInputMode="adjustResize"
3. 前端在存在滚动条的情况下，将获取焦点的元素执行以下方法：

const input = document.querySelector('#input
input.addEventListener('focus', () => {
  setTimeout(() => {
    input.scrollIntoView(false);
  }, 300);
});

六、ios低版本的手机中，h5 使用new Date(yyyy.MM.dd) 类似格式会报错。建议使用new Date(yyyy, MM-1, dd)的形式

// 注意，这种写法的月份是从0开始的
const date = new Date(2024, 6, 24);