React开发计算器在iPhone显示异常，Android及PC端正常求排查

• 确认viewport配置：
  检查项目根目录index.html中的viewport meta标签，确保包含适配移动端的关键参数：

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

  缺失maximum-scale或user-scalable可能导致iPhone上页面缩放异常，引发布局错乱。

• 适配Safari视口高度：
  替换布局中使用的height: 100vh为min-height: 100dvh——Safari的100vh会包含状态栏高度，导致元素被挤压或偏移，dvh（动态视口高度）能自动适配设备的可用视口空间。

• 强化Safari样式重置：
  除了-webkit-appearance: none，补充针对Safari的全局样式重置，覆盖默认行为：

  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    box-sizing: border-box;
  }
  

  针对计算器按钮这类交互元素，进一步清除Safari默认样式：

  .calculator-btn {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: unset; /* 移除Safari默认圆角 */
    background-color: #你的按钮背景色;
  }
  

• 优化字体渲染：
  在全局样式中添加字体平滑属性，解决Safari字体模糊或渲染异常问题：

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  

• 验证GitHub Pages资源路径：
  检查vite.config.js中的base配置是否匹配仓库名称，例如：

  export default defineConfig({
    base: '/your-repo-name/',
    // 其他配置
  })
  

  路径错误会导致iPhone上无法加载CSS或静态资源，直接引发样式失效。

• 远程调试定位问题：
  使用Mac连接iPhone，开启Safari开发者选项后远程调试页面，查看元素的样式计算结果，确认哪些样式被Safari覆盖或未生效，这是精准定位问题的核心方法。

内容的提问来源于stack exchange，提问作者Edgar Santos Estevam