javascript - iOS/移动版 Safari 是否为其字体大小调整控件提供 javascript 事件或媒体查询？

Question

我设计的一个响应式网站使用 js 来确定字体大小，然后应用 css 使用的类来进行各种布局调整。简而言之，我的 js 检测到围绕文本字符的跨度的调整大小。最新版本的移动版 Safari 提供了字体大小调整控件，其缩放机制未触发我的检测 js。关于可用于检测移动 Safari 字体大小调整的事件或其他更改的任何想法？也许是 css 媒体查询？我尝试了一个基于 js intersectionobserver 的解决方案:在桌面上工作但不是移动 :-(

Answer 1

根据 MDN

The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

请务必包含 CSS 属性，例如

/* Keyword values */
text-size-adjust: none;
text-size-adjust: auto;

/* <percentage> value */
text-size-adjust: 80%;

/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

但是，iOS 版 Safari 仅支持非百分比值。

---

此外，请考虑查看 Apple 的 documentation. 这解释了如何使用文本调整因子的百分比。

html {-webkit-text-size-adjust:200%}

我不确定哪一个是正确的，因为它们相互冲突。您必须真实地面对自己，看看什么最适合您。

PS:请务必为上述属性包含 -webkit- 前缀，以确保它适用于 Safari 和其他 WebKit 浏览器。