Lobsters 项目中的移动端 Safari 文本缩放问题解析

在 Lobsters 开源项目中，开发者发现了一个关于移动端 Safari 浏览器在横竖屏切换时的文本显示问题。当用户将设备从竖屏旋转至横屏时，页面中的部分文本会放大显示，而其他文本则保持原有尺寸，导致页面元素大小不一致，影响用户体验。

这个问题源于移动端浏览器的默认行为。iOS 的 Safari 浏览器在检测到视口宽度变化时，会自动调整文本大小以提高可读性。这种自动调整机制虽然对纯文本内容友好，但在精心设计的网页布局中可能会造成视觉不一致。

问题的技术本质在于 CSS 的 text-size-adjust 属性。这个专为移动设备设计的属性控制着浏览器是否应该调整文本大小以适应视口变化。默认情况下，该属性处于自动状态，允许浏览器根据需要调整文本大小。

解决方案有两种技术路径：

1. 完全禁用文本自动调整：通过设置 text-size-adjust: none 可以阻止浏览器调整任何文本大小。这样在横屏模式下，文本将保持原有尺寸，只是每行能显示更多字符。这种方案保持了设计的一致性，但可能牺牲部分可读性。

2. 统一调整所有文本：保持默认行为，但通过 CSS 确保所有相关元素都使用相同的文本缩放策略。这需要更精细的样式控制，确保所有文本元素都能一致地响应视口变化。

在实际应用中，第一种方案更为简单直接，也是许多现代 CSS 重置方案推荐的做法。它能够确保设计师对页面布局的完全控制，避免浏览器干预带来的不一致性。第二种方案虽然保留了可读性增强，但实现起来更为复杂，需要对各种文本元素进行统一处理。

这个问题的修复对于移动端用户体验至关重要，特别是在新闻阅读类应用中，文本显示的稳定性直接影响用户的阅读体验。通过合理的 CSS 设置，开发者可以在设计控制和浏览器辅助功能之间找到平衡点。