竖屏转横屏字体大小异常问题及解决方案-webkit-text-size-adjust:100%

问题场景 #

我之前碰到过一模一样的iOS Safari字体适配坑：在Safari响应式调试模式下测试时，所有字体大小都显示正常，但在iPhone 5s真机上，竖屏模式下字体完全符合body里设置的px值，切换到横屏后字体却莫名变大；另外导航栏初始字体正常，但展开后也会出现字体放大的情况。

最让人困惑的是，我所有字体大小都是在body标签里用px单位统一设置的，既没有单独给元素指定字体大小，也没用到em、rem这类相对单位，一开始完全摸不着问题根源。

解决方案 #

后来才搞清楚，这是iOS Safari的默认行为——它会在横屏模式下自动放大字体以“提升可读性”，我们只需要添加一行CSS就能彻底解决：

-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */

这行代码的核心作用是禁止浏览器自动缩放字体，同时还保留了用户手动缩放页面的权限，不会影响页面的可访问性。

完整CSS代码示例 #

把这行属性加到body样式里即可，以下是整合后的完整代码：

* { 
  margin: 0; 
  padding: 0; 
}
body { 
  font-family: helvetica, arial, sans-serif; 
  font-size: 23px; 
  font-weight: normal; 
  text-align: left; 
  line-height: 1.2; 
  color: black;
  -webkit-text-size-adjust: 100%; /* 解决横屏字体放大问题 */
}
h1, h2 { 
  font-size: inherit; 
  font-weight: inherit; 
  text-decoration: none; 
  -webkit-hyphens: auto; 
  hyphens: auto; 
}
@media screen and (max-width: 1112px) { 
  /* 断点后字体改为20px */
  body { font-size: 20px; } 
}
@media screen and (max-width: 1024px) { 
  /* 断点后字体改为18px */
  body { font-size: 18px; } 
}

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