iOS/mobile Safari是否为其字体调整控件提供了javascript事件或媒体查询？

Question

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

Answer 1

根据MDN的说法

文本大小调整CSS属性控制一些智能手机和平板电脑上使用的文本膨胀算法。其他浏览器将忽略此属性。

请确保包含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;

但是，在Safari for iOS中只支持非百分比值。

同样，看看苹果的documentation.，它解释了如何使用文本大小调整因子的百分比。

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

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

PS：请确保在提到的属性中包含- WebKit - prefix，以确保它适用于safari和其他WebKit浏览器。

Answer 2

所以移动safari所做的是:当字体放大时，实际上是视窗变窄了。有一种被广泛支持的window.matchMedia(这里是媒体查询)方法，它返回可以添加监听器的“媒体查询对象”。在我的例子中，我想知道什么时候视口比apx窄。320px...在这种情况下，我将应用我的样式类。