Navigator跳转页面后样式错乱问题求助

以下是几种可能导致该问题的原因及对应解决办法：

• 拼写/语法检查触发：macOS下浏览器默认会对可编辑内容启用拼写检查，红黄下划线是拼写错误标记。若整个页面出现该情况，可能是页面元素被误识别为可编辑状态。可在页面根元素添加属性禁用检查：

  <body spellcheck="false">
  

  同时通过CSS避免字体异常缩放：

  * {
    -webkit-text-size-adjust: none;
  }
  

• 视口配置缺失：跳转页面未设置正确的viewport meta标签，导致浏览器适配逻辑异常，字体被放大。需在页面头部添加：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 样式隔离或重置失效：widget嵌入其他页面正常，但跳转页面未继承父应用的样式重置（如Normalize.css），导致浏览器默认样式生效（字体偏大）。建议在目标页面引入统一的样式重置文件，或使用CSS模块化、Shadow DOM实现样式隔离。

• 系统字体设置影响：macOS系统的辅助功能可能开启了字体放大。检查「系统设置-辅助功能-显示」，确认是否开启“更大字体”或“缩放”，临时关闭测试是否恢复。

• SPA路由样式加载时机问题：若为单页应用路由跳转，可能是目标页面样式未及时加载。检查路由配置，确保样式文件在页面渲染前完成加载。

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