Safari 允许文本根据移动文本大小进行缩放

Question

我发现 iphone Safari 无法响应设备上的文本大小更改（设置 -> 显示和亮度 -> 文本大小）。尝试在 css 中使用文本大小调整属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

当在设备上更改文本大小时，

Chrome 似乎可以正确缩放文本。是否需要任何其他属性才能让它在 iphone Safari 上运行？

https://jsfiddle.net/pey8b4ct/2

<style>
    body {
        -ms-text-size-adjust: auto;
        -moz-text-size-adjust: auto;
        -webkit-text-size-adjust: auto;
    }
</style>
<div>
  <label>Some text box</label>
  <input type="text">
</div>
<div>
<p>
Some paragraph we need to take into account
</p>
</div>
<div>
    <label>Some text box2</label>
<input type="text">
</div>
enter code here

Answer 1

看起来添加样式 font: -apple-system-body; 可以解决问题，现在 Safari 也可以根据需要进行缩放。另一件事是字体大小应该以 em 为单位，如果以 px 为单位则不会缩放。更多细节如下 https://ind.ie/labs/blog/dynamic-type-support/

Safari 允许文本根据移动文本大小进行缩放

Safari allow text to scale based on mobile Text size

html

javascript

css

mobile-safari

ios