H5开发，IOS你真的适配好了吗

引言

在移动端 H5 项目中，我们往往以为只要在 Chrome 模拟器里调试通过，就算是“适配完成”。然而，当页面真正跑到 iOS Safari 或嵌入到 App 的 WKWebView 里，各种细节问题才会浮出水面——100vh 布局被工具栏挡住、软键盘弹出导致页面抖动、position: fixed 在滚动中失效、刘海屏安全区遮挡内容……这些在桌面调试中看不到的“暗坑”，却足以让用户体验打折扣。iOS 的渲染机制、滚动行为以及安全区处理与 Android 有着天然差异，如果没有针对性地适配与测试，即便页面在 Android 上表现完美，也可能在 iOS 上漏洞百出。H5 开发者，是时候认真审视一下——你的 iOS 适配，真的准备好了吗？

Safari 浏览器

在MDN中这样介绍Safari：Safari 是苹果公司开发的 Web 浏览器，内置于其操作系统中，包括 macOS（Mac 计算机）、iPadOS（iPad 平板）、iOS（iPhone 手机）、visionOS（增强现实设备，如 Apple Vision Pro）。Safari 使用开源的 WebKit 渲染引擎，该引擎源自 KHTML

Safari 浏览器使用的也是 Webkit。但是具体版本是多少不得而知了。

以下我们查看 position: fixed; 的兼容性问题。 上图可以看到3.2-4.3版本都是不兼容的，这小部分机型都是可以舍弃的，使用率大概在0.01%
下图中是支持的，但是需要加上webkit修饰

背景

公司原生开发迭代速度太慢，需要将功能全迁移至H5，实现快速迭代。内嵌Webview实现对应原生和H5交互。在开发时，总是发现IOS和Android样式或功能不统一。

• Android内核：Chromium（Blink 渲染引擎 + V8 JavaScript 引擎）
• IOS内核：webkit

那么有个疑问：我们的代码到底在哪一端出现了问题呢。

已遇到问题集合

• 时间格式怎么和 Android 不同
• 屏幕怎么出现了滚动条
• 拼音输入怎么会有空格
• z-index 层级无效，元素被遮挡

更多问题欢迎大家补充探讨

怎么去避免这些问题呢？

1. 查看对应样式属性兼容性
   通过查阅mdn文档、以及Css use，查看对应的兼容性，使用修饰符-webkit。
2. 使用Safari浏览器模拟
   开发过程中使用IOS浏览器进行调试