这问题我之前帮团队踩过坑，iOS 13 Safari新增的可读性缩放（系统级的页面放大优化）确实容易给依赖固定尺寸的页面带来布局破裂的问题，咱们从几个核心方向来解决：

1. 替换固定单位为相对单位，打造弹性布局 #

苹果官网能完美兼容的核心原因，就是全程用相对单位（rem/em/%/vw/vh）替代硬编码的px固定值。你可以检查页面的核心容器、导航栏、模块区域：

• 把固定宽度如width: 1200px改成max-width: 100%或者width: min(1200px, 100vw)，确保容器不会超出缩放后的视口；
• 字体大小尽量用rem（结合根元素的font-size: 16px），避免用固定px，这样缩放时字体和容器能保持比例；
• 间距、内边距用em或者%，让元素间的留白也能自适应缩放。

2. 调整CSS文本缩放控制属性 #

添加-webkit-text-size-adjust: 100%;到全局样式中，这个属性可以阻止Safari自动单独放大文本（很多布局破裂是因为文本被单独放大后撑破容器），让页面整体按比例缩放，和苹果官网的表现一致：

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

3. 修复固定定位元素的适配问题 #

如果页面有固定定位的元素（比如顶部导航、侧边栏），检查它们的宽度设置：

• 把固定宽度改成width: 100%，或者用calc()结合视口单位，比如width: calc(100vw - 30px)；
• 避免给固定元素设置硬编码的left/right值，改用left: 0; right: 0;让元素自动撑满视口宽度。

4. 排查viewport-fit属性的影响 #

你当前用的viewport-fit=cover是针对刘海屏的全屏适配，部分场景下它会改变视口的计算逻辑，和可读性缩放功能冲突。可以尝试：

• 暂时移除viewport-fit=cover，测试布局是否恢复正常；
• 如果必须保留刘海屏适配，结合safe-area-inset-*属性调整元素的内边距，确保缩放时元素不会超出安全区域。

5. 用Safari开发者工具实时调试 #

打开Safari的响应式设计模式，找到“可读性缩放”的模拟选项（在设备模拟的下拉菜单里），实时观察缩放过程中哪些元素错位、溢出，针对性修改样式，这样能快速定位问题点。

核心思路就是让页面从“固定尺寸布局”转向“弹性自适应布局”，减少硬编码的像素依赖，确保所有元素都能跟随视口缩放比例动态调整，这样就能和苹果官网一样，在可读性缩放时保持布局完整。

内容的提问来源于stack exchange，提问作者Sami Khan