我设计的一个响应式网站使用js来确定字体大小，然后应用css用于各种布局调整的类。我的js检测到一个文本字符周围的跨度的大小。最新版本的移动的Safari提供了一个字体大小控制，其缩放机制并没有触发我的检测js。任何关于事件或其他变化的想法，我可以用来检测移动的Safari的字体？也许是一个css媒体查询？我尝试了一个基于js intersectionobserver的解决方案：在桌面上工作，但不能在移动的上工作：-（
disho6za1#
根据MDNtext-size-adjust 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;
字符串但是，iOS版Safari仅支持非百分比值。此外，考虑查看Apple的文档，其中解释了如何使用文本大小调整因子的百分比。
html {-webkit-text-size-adjust:200%}
型我不确定哪一个是正确的，因为它们相互冲突。你必须自己测试，看看什么最适合你。PS：请务必为提到的属性添加-webkit-前缀，以确保其适用于Safari和其他WebKit浏览器。
kmpatx3s2#
因此，移动的safari所做的是：当字体放大时，实际上是视口变窄。有一个广泛支持的window.matchMedia（media query here）方法，它返回一个“媒体查询对象”，可以向其添加侦听器。在我的例子中，我想知道视口何时比apx. 320 px窄.在这种情况下，我将应用我的样式类。
2条答案
按热度按时间disho6za1#
根据MDN
text-size-adjust CSS属性控制某些智能手机和平板电脑上使用的文本膨胀算法。其他浏览器将忽略此属性。
确保包含CSS属性，例如
字符串
但是，iOS版Safari仅支持非百分比值。
此外，考虑查看Apple的文档，其中解释了如何使用文本大小调整因子的百分比。
型
我不确定哪一个是正确的，因为它们相互冲突。你必须自己测试，看看什么最适合你。
PS：请务必为提到的属性添加-webkit-前缀，以确保其适用于Safari和其他WebKit浏览器。
kmpatx3s2#
因此，移动的safari所做的是：当字体放大时，实际上是视口变窄。有一个广泛支持的window.matchMedia（media query here）方法，它返回一个“媒体查询对象”，可以向其添加侦听器。在我的例子中，我想知道视口何时比apx. 320 px窄.在这种情况下，我将应用我的样式类。