响应式CSS设置下<h1>标签真机移动端文字重叠问题排查

结论 #

该文字堆叠故障与GitHub Pages部署平台完全无关。

故障原因 #

• Chrome DevTools响应式模式仅通过缩放桌面端渲染视口模拟移动端尺寸，无法完全还原移动端浏览器的真实排版逻辑：所有iOS端浏览器（含Chrome、Safari）均采用WebKit内核，与桌面端Chrome使用的Blink内核对CSS属性的计算逻辑存在差异。
• 问题样式中font-variant: small-caps与clamp()动态vw字号搭配使用时，未显式定义行高，iOS WebKit内核在该场景下存在默认行高计算bug：小屏尺寸下行高计算值远小于字号实际占用高度，直接导致文字上下堆叠重叠。
• 本地版本与GitHub Pages部署版本在桌面端响应式模式下显示均正常，是因为桌面端浏览器内核不存在该计算bug，和部署平台没有关联。

效果参考 #

• Chrome DevTools响应式模式正常显示效果：
  
• iPhone 8真机端故障截图：
  

问题原始样式 #

h1 {
  font-variant: small-caps;
  font-size: clamp(1rem, 9vw, 4rem);
  padding: 0 1rem;
}

修复方法 #

给h1元素显式设置无单位行高，强制覆盖浏览器默认行高计算即可，修复后样式参考：

h1 {
  font-variant: small-caps;
  font-size: clamp(1rem, 9vw, 4rem);
  padding: 0 1rem;
  line-height: 1.2; /* 可根据实际视觉需求在1.1~1.4区间调整数值 */
}

修改代码后重新部署，清空移动端浏览器缓存访问即可恢复正常，无需调整任何GitHub Pages相关配置。

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