天气APP在iPhone 12真机横屏显示与Chrome/Firefox开发者工具预览不一致如何解决

你可以按以下优先级排查修复问题：

• 首先检查viewport元标签配置，添加刘海屏适配参数，正确配置参考如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

其中viewport-fit=cover参数是为了适配iPhone刘海屏的全视口渲染，避免横屏时自动预留安全边距导致布局偏移。

• 禁用iOS Safari横屏字体自动放大特性，在全局CSS中添加如下规则：

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

该特性是iOS Safari特有逻辑，桌面端模拟器默认不会触发，会导致横屏时字体自动缩放撑破布局。

• 适配横屏安全边距，涉及到视口边缘的容器样式，使用iOS支持的安全区变量预留边距，参考配置：

.container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

iPhone 12横屏时左侧刘海区域、右侧圆角区域都属于非交互安全区，未做适配会导致内容被遮挡、布局错位。

• 替换vh单位为动态视口单位，iOS Safari的vh计算逻辑包含了地址栏的高度，和模拟器的标准视口高度计算规则不同，横屏时会出现高度溢出或者不足的问题，使用dvh单位替代即可适配：

/* 替换前 */
.height-full {
  height: 100vh;
}
/* 替换后 */
.height-full {
  height: 100dvh;
}

如果需要兼容更低版本的iOS系统，可以通过JS动态获取视口高度，赋值给自定义CSS变量使用。

• 最后可以通过桌面端Safari开发者工具连接iPhone真机调试，直接查看真机上的元素样式、布局边界，快速定位具体的样式冲突问题。

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