iPhone端网页主标题字体异常缩小，设置-webkit-text-size-adjust无效如何解决？

1. 校验视口meta标签配置 #

• 首先确认页面<head>中是否存在正确的视口声明，缺少该配置时Safari会默认按PC端宽度渲染页面，自动缩放字体适配屏幕，正确配置如下：

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

• 重点检查是否漏写width=device-width属性，这是移动端适配的基础配置。

2. 排查字体单位与样式冲突 #

• 若主标题使用vw/rem等相对单位，可临时替换为固定px值测试，排除相对单位在iOS下的计算异常问题。
• 可通过Safari开发者工具连接iPhone调试，查看主标题元素实际生效的CSS规则，确认是否存在针对移动端的媒体查询意外修改了字体大小。

3. 修正文本缩放属性的生效范围 #

• 不要仅给body添加-webkit-text-size-adjust属性，要全局覆盖所有元素，避免部分元素未继承配置：

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

• iOS 15及以上版本对none值的支持存在兼容性问题，统一使用100%即可。

4. 排查布局与默认样式干扰 #

• 若主标题在flex布局容器内，检查父容器是否设置了flex-shrink: 1导致容器被挤压，间接引发字体缩小，可给主标题外层容器添加flex-shrink: 0验证。
• 给主标题强制指定font-weight、line-height属性，添加font-optical-sizing: auto，覆盖Safari默认的文本优化规则干扰。

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