h5网页嵌套安卓苹果APP内 微信内打开H5等 遇到的各种适配问题与解决方案汇总 --持续更新

iOS时间NaN的问题

iOS上的WebView的问题，iOS的Date不识别 “-”，解决思路就是 在 new Date(sz)之前，将字符串所有的“-”替换为”/"
但也有不少情况是不识别 “/”，所以最好的解决办法还是

• 后端直接返回可展示得信息前端不处理
• 需要时间判断的地方后端直接返回结果

修改微信字体大小后 布局异常

安卓、IOS拉起本地APP并跳转特定页

• 基础原理

• 微信外唤起：
  用常规方式：通用的Scheme和IOS自己的Universal links。都支持自定义参数。

  • IOS：Universal links
    一对一，不需要用户手动确认。
    公司的Universal links服务器地址 供IOS系统访问 重定向页面做转发
    可以下载JSON配置文件，系统会通过规则匹配后，跳转APP
  • 安卓：
    一对多，需要用户手动确认。
    直接自定义URL Scheme唤起APP，例如唤起支付宝APP

• 微信内唤起：

  • 1. 由于微信禁止了通用的Scheme和IOS自己的Universal links方式唤起APP，所以需要其他方式。
  • 2. 可以提示用户在外部浏览器打开页面后 利用schema唤起应用
  • 3. 直接接入微信OpenSDK。
       注册认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转满足一定条件的App。
  • 4. 第三方代理微信
       友盟【Ulink】【https://developer.umeng.com/docs/191212/detail/193297】
       应用宝【https://a.app.qq.com/o/simple.jsp】

IOS在APP内部网页跳转回到上一页时 为什么上一页没有被销毁而是被暂停 安卓却需要重新加载

当 iOS 设备呼出软键盘后,页面会自动滚动以确保输入框可见,导致浏览器可以上下拉动 导致页面效果不一致

IOS设备隐藏滚动条

软键盘弹出时，在Android系统下，H5所在容器（即WebView）高度会被压缩

禁止 iOS 浏览器中的连点放大

• 你可以通过设置 meta 标签来禁用双击缩放：

• 还可以给按钮添加逻辑

• 或是在index.html中直接禁止相关操作

IOS和安卓客户端加载H5流程：

IOS和安卓客户端切换页面(例如h5支付场景)：

IOS和安卓与H5前端的通信的主要方式

安卓IOS的webView或H5浏览器拿到的像素宽高，比手机屏幕高度差很多？

怎么修改h5软键盘的文字，将右下角的回车换行更改为前往或发送？

文档中很多都是修改为前往，搜索，提交等。修改的属性，其实还是有另外一个属性的：enterkeyhint

输入发送完成收回软键盘

图片自适应

微信开启了大字体模式，可能会导致页面布局失效。

• 这是因为微信会在 HTML 页面的根元素上添加一个 wx-wx-root 类名，并且会设置一些特殊的样式。

0. 微信官方文档

或是自己判断再微信内 直接将全局字体大小写死

1. 可以使用 CSS 媒体查询 检测是否在大字体模式下, 并针对这种情况进行特殊的样式调整:

2. 使用 Javascript 动态修改 在页面加载时检测是否在大字体模式下, 并动态修改 DOM 元素:

3. 使用第三方库进行适配 您可以使用一些第三方库,如 vant, cube-ui 等,它们提供了针对微信大字体模式的适配方案。这些库会自动检测当前环境,并提供相应的样式调整。

reolaceAll低版本浏览器不兼容问题

如果 replaceAll 在某些浏览器中不兼容，可以使用正则表达式配合 replace 方法来实现相同的功能：

IOS的PT 安卓的DP

PT

1. pt 在 iOS 开发中就是代表分辨率的最小单位。和 px 一样，也是一种「相对长度」。
2. pt 这个单位的缘由是苹果的 Retina 屏的分辨率较高，为了更好的定义和展现自己的产品，苹果就自己定义了一个设计单位 pt，用来给 iOS 系统的设计师做基础设计，并可以根据公式变换成 px 以适应不同 PPI 的手机。
3. pt 与 px 的转换方式是：pt = ppi / 163 px 。ppi 不能被 163 整除时，可以进行四舍五入。比如如果 ppi 是 350，那么 pt = 350 / 163 = 2.14px，就是说 1pt 约等于 2px。
4. 以上公式中 163 这个数字的来源是：iPhone3 的 3.5 英寸屏幕的分辨率是 320*480px，它的 ppi 按照我们上文提到过的 ppi 计算公式，等于 163。苹果规定：ppi = 163 时，1pt = 1px。

DP

1. dp 全称 Density-independent pixel，可以理解为是一种独立于 px 之外的设计单位，是 Andriod 系统用来给设计师做基础设计使用的，也可以根据公式变换成 px。
2. 同 pt 一样，1dp 在任何设备上的大小都应该是一样的，但是代表几个 px 却是不固定的，以此来应对不同 ppi 的设备。
3. dp 和 px 的转换方式是：dp = ppi / 160 px。原理同上文，但分母取了整数，被规定为 160，结果同样可四舍五入。

H5项目的Rem适配

前端还原设计稿很重要，目前最泛用的还是rem。
postcss-pxtorem 能够直接按照设计图的尺寸开发，并且能自动编译转换成rem

autoprefixer 能够自动为你的CSS代码添加必要的浏览器前缀，以确保在各个现代和旧版浏览器中的兼容性。通过这个项目，开发者可以节省大量手动添加前缀的时间，从而更加专注于代码逻辑和设计。

vite.config.js

H5网页嵌在APP内部 手机锁屏后再打开 setInterval会重复执行

在H5网页嵌入到APP内部时，如果手机锁屏后再打开，可能会遇到setInterval重复执行的问题。这是因为当应用进入后台或屏幕锁定时，浏览器的定时器可能会暂停或重置，导致重新激活时定时器被重新启动。

问题原因
系统休眠：当手机锁屏时，操作系统可能会将应用置于休眠状态，暂停所有活动，包括Javascript的定时器。
WebView恢复：当用户解锁手机并返回应用时，WebView可能需要重新加载或恢复页面，这会导致setInterval函数重新执行。
解决方法

1. 使用 visibilitychange 事件
   你可以监听 visibilitychange 事件来检测页面是否可见，并根据页面的可见性来控制 setInterval 的行为。

2. 使用 pagehide 和 pageshow 事件
   你也可以使用 pagehide 和 pageshow 事件来处理页面隐藏和显示的情况。